/* ========================================================================== Arthemis New Fly · Componentes Classes de referência, com os mesmos valores do protótipo (prototipo/*.dc.html). Versão 1.2 · 18 out 2026. Depende de tokens.css. Prefixo: .ds- ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } .ds-root, body.ds-root { margin: 0; background: var(--page); color: var(--text); font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--leading-normal); transition: background-color .3s ease, color .3s ease; } .ds-root button, .ds-root input, .ds-root textarea, .ds-root select { font: inherit; } /* Barras de rolagem (3 nov 2026, pedido do usuário): em todo o protótipo, como no Mac — finas, transparentes e só aparecem com o mouse em cima de quem rola (e só se houver o que rolar). Quem esconde de vez (scrollbar-width: none) continua escondendo. */ :where(*) { scrollbar-width: thin; scrollbar-color: transparent transparent; } :where(*:hover) { scrollbar-color: var(--scroll-thumb) transparent; } /* Arrastando um card (5 nov 2026): nada embaixo dele recebe hover; senão cada card cruzado recalcula o estilo e a barra de rolagem da cadeia toda */ html.art-arrastando [data-board="1"] * { pointer-events: none !important; } /* …e as ~40 telas fechadas do quadro (ficha da task, Clientes, Atalhos, Rotas…, 36 mil nós) saem do cálculo de estilo e layout enquanto o card voa */ html.art-arrastando [data-camadas="1"] { display: none !important; } .ds-scroll { overflow: auto; overscroll-behavior: contain; scrollbar-width: none; } .ds-scroll::-webkit-scrollbar { display: none; } /* ---------- Tipografia ---------- */ .ds-display { margin: 0; font-size: var(--text-display); font-weight: 600; letter-spacing: var(--tracking-display); } .ds-h2 { margin: 0; font-size: var(--text-h2); font-weight: 600; letter-spacing: var(--tracking-title); } .ds-h3 { margin: 0; font-size: var(--text-h3); font-weight: 600; letter-spacing: var(--tracking-card); line-height: var(--leading-tight); } .ds-title { margin: 0; font-size: var(--text-title); font-weight: 600; } .ds-body { font-size: var(--text-body); } .ds-sm { font-size: var(--text-sm); } .ds-xs { font-size: var(--text-xs); line-height: 1.45; } .ds-muted { color: var(--muted); } .ds-regular { font-weight: 400; } /* 1.86: texto cinza dentro de linha em negrito (Kanban) */ .ds-ellipsis { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 1.86 */ .ds-text-2 { color: var(--text-2); } .ds-num { font-variant-numeric: tabular-nums; } .ds-overline { font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--muted); } .ds-menu-label { font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-menu-label); text-transform: uppercase; color: var(--muted); padding: 8px 10px 4px; } .ds-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-2); } .ds-error-text { font-size: var(--text-xs); color: var(--tone-red-fg); } .ds-link { background: transparent; border: 0; padding: 4px 2px; cursor: pointer; color: var(--accent-text); font-size: var(--text-xs); font-weight: 600; } .ds-kbd { font-family: inherit; font-size: var(--text-2xs); color: var(--muted); background: var(--kbd); border-radius: 6px; padding: 2px 6px; } /* Teclas de um atalho (Atalhos do teclado, 30 out 2026): as .ds-kbd de uma combinação juntas, 22px e legíveis; “então” entre os passos de uma sequência (G então I) e “ou” entre as alternativas (J ou ↓) */ .ds-keys { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px; flex: none; } .ds-keys .ds-kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; box-sizing: border-box; padding: 0 6px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; } .ds-keys__then, .ds-keys__or { font-size: var(--text-2xs); color: var(--muted); padding: 0 2px; } /* Gravando a tecla nova (Atalhos do teclado, etapa 4): a tecla no acento, pulsando até a pessoa apertar; treme quando a tecla não pode */ @keyframes dsKbdGrava { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-30); } 50% { box-shadow: 0 0 0 4px transparent; } } .ds-keys .ds-kbd--gravando { background: var(--accent-16); color: var(--accent-text); padding: 0 10px; font-weight: 600; animation: dsKbdGrava 1.2s ease-in-out infinite; } /* ---------- Botões ---------- */ .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--control-xl); padding: 0 16px; border-radius: var(--radius-lg); font-family: inherit; font-size: var(--text-sm); font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--text); transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease, transform .35s var(--ease-overshoot); } .ds-btn:focus-visible { outline: none; box-shadow: var(--focus-ring-strong); border-color: var(--accent); } .ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity: .62; cursor: default; } .ds-btn--primary { background: var(--primary); color: var(--on-primary); font-weight: 600; border: 0; } .ds-btn--primary:hover { box-shadow: 0 8px 20px -10px var(--accent-55); } .ds-btn--outline { background: var(--surface); border-color: var(--border); padding: 0 14px; } .ds-btn--outline:hover { border-color: var(--border-hover); } .ds-btn--outline[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-20); } .ds-btn--ghost { color: var(--text-2); } .ds-btn--ghost:hover { background: var(--hover); color: var(--text); } .ds-btn--danger { background: var(--danger-solid); color: #FFFFFF; font-weight: 600; border: 0; } .ds-btn--danger-outline { background: transparent; color: var(--tone-red-fg); border-color: rgba(224,108,117,.5); font-weight: 600; } .ds-btn--danger-text { background: transparent; color: var(--tone-red-fg); font-weight: 600; padding: 0 6px; } /* Desabilitado “de verdade” (primário ou destrutivo até confirmar): vira neutro */ .ds-btn--primary:disabled, .ds-btn--danger:disabled { opacity: 1; background: var(--hover); color: var(--muted); cursor: not-allowed; } .ds-btn--dashed { width: 100%; height: 42px; border: 1px dashed var(--dashed); color: var(--text-2); font-weight: 600; } .ds-btn--dashed:hover { border-color: var(--accent); color: var(--text); } .ds-text-link { background: transparent; border: 0; padding: 0; cursor: pointer; font-size: var(--text-sm); font-weight: 500; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } .ds-btn--sm { height: var(--control-md); padding: 0 12px; border-radius: var(--radius-md); } .ds-btn--xs { height: var(--control-sm); padding: 0 12px; border-radius: 9px; font-size: var(--text-xs); } /* atalho dentro do botão principal */ .ds-btn .ds-kbd--on-primary { font-size: var(--text-2xs); background: rgba(255,255,255,.2); color: inherit; border-radius: 6px; padding: 2px 6px; } /* Botão só com ícone: sempre com aria-label (vira tooltip) */ .ds-icon-btn { display: grid; place-items: center; flex: none; cursor: pointer; width: 34px; height: 34px; border-radius: var(--radius-md); border: 1px solid var(--border); background: transparent; color: var(--muted); transition: background .15s ease, color .15s ease, border-color .2s ease; } .ds-icon-btn:hover { background: var(--hover); color: var(--text); } .ds-icon-btn--plain { border: 0; width: 30px; height: 30px; border-radius: var(--radius-sm); } .ds-icon-btn--round { border-radius: var(--radius-round); background: var(--surface); color: var(--text-2); } .ds-icon-btn--lg { width: 42px; height: 42px; border: 0; border-radius: var(--radius-round); } /* “+” que gira no hover (pé da coluna) */ .ds-add-icon { width: 24px; height: 24px; flex: 0 0 24px; border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--text-2); background: var(--hover); transition: transform .45s var(--ease-bounce), background .25s ease, color .25s ease, box-shadow .25s ease; } *:hover > .ds-add-icon { color: #FFFFFF; background: var(--primary); transform: rotate(90deg) scale(1.08); box-shadow: 0 4px 10px -3px var(--accent-55); } /* ---------- Campos ---------- */ .ds-input { width: 100%; height: var(--control-2xl); padding: 0 14px; border-radius: var(--radius-lg); background: var(--input-bg); border: 1px solid var(--border); color: var(--text); font-size: var(--text-body); outline: none; transition: border-color .2s ease, box-shadow .2s ease; } .ds-input::placeholder { color: var(--muted); } .ds-input:hover { border-color: var(--border-hover); } .ds-input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); } .ds-input[aria-invalid="true"] { border-color: var(--tone-red-dot); box-shadow: var(--error-ring); } textarea.ds-input { height: auto; min-height: 96px; padding: 12px 14px; line-height: var(--leading-relaxed); resize: vertical; } /* Campo com prefixo ou unidade (1.191): a moldura do ds-input com o campo dentro; foco e erro pela moldura (:focus-within) */ .ds-input--affix { display: flex; align-items: center; gap: 8px; cursor: text; } .ds-input--affix:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); } .ds-input--affix[aria-invalid="true"] { border-color: var(--tone-red-dot); box-shadow: var(--error-ring); } .ds-input--affix > input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; color: inherit; font: inherit; } .ds-input--affix > input::placeholder { color: var(--muted); } .ds-input__affix { flex: none; color: var(--muted); font-size: var(--text-sm); white-space: nowrap; } .ds-field { display: flex; flex-direction: column; gap: 6px; } /* Campo com ícone (busca da sidebar) */ .ds-search { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); color: var(--muted); } .ds-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--text); font-size: var(--text-body); } .ds-search--pill { height: var(--control-3xl); border-radius: var(--radius-pill); padding: 0 8px 0 18px; } /* Título editável sem borda (Nova task) */ .ds-title-input { width: 100%; padding: 0; border: 0; outline: none; background: transparent; color: var(--text); font-size: var(--text-display); font-weight: 600; letter-spacing: var(--tracking-title); } /* Gatilho de propriedade (Status, Cliente, Prioridade, Prazo…) */ .ds-prop { display: inline-flex; align-items: center; gap: 8px; height: var(--control-lg); padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: transparent; color: var(--text-2); font-size: var(--text-sm); cursor: pointer; white-space: nowrap; max-width: 240px; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; } .ds-prop[data-filled="true"] { background: var(--hover); color: var(--text); font-weight: 500; } .ds-prop[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-18); } /* ---------- Switch ---------- */ .ds-switch { display: inline-flex; align-items: center; gap: 10px; background: transparent; border: 0; padding: 6px 2px; color: var(--text-2); font-size: var(--text-sm); cursor: pointer; } .ds-switch__track { width: 36px; height: 20px; border-radius: var(--radius-pill); padding: 2px; display: flex; background: var(--switch-off, var(--border)); transition: background .25s ease; } .ds-switch__knob { width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; box-shadow: var(--shadow-knob); transition: transform .32s var(--ease-switch); } .ds-switch[aria-checked="true"] .ds-switch__track, [aria-checked="true"] > .ds-switch__track, [aria-checked="true"] > * > .ds-switch__track { background: var(--accent); } /* 1.82: o trilho também vale dentro de qualquer botão role="switch" ou item com aria-checked */ [aria-disabled="true"] .ds-switch__track { opacity: .5; } .ds-switch[aria-checked="true"] .ds-switch__knob, [aria-checked="true"] > .ds-switch__track .ds-switch__knob, [aria-checked="true"] > * > .ds-switch__track .ds-switch__knob { transform: translateX(16px); } /* ---------- Checkbox ---------- */ .ds-check { width: 16px; height: 16px; flex: 0 0 16px; border-radius: var(--radius-xs); display: grid; place-items: center; border: 1.5px solid var(--dashed); color: transparent; background: transparent; transition: background .15s ease, border-color .15s ease, color .15s ease; } .ds-check[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: #FFFFFF; } /* Subtask: caixa 18px verde + risco que cresce */ .ds-subtask { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 7px 8px; border-radius: 9px; cursor: pointer; background: transparent; border: 0; width: 100%; text-align: left; color: var(--text); } .ds-subtask:hover { background: var(--hover); } .ds-subtask__box { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 6px; display: grid; place-items: center; border: 1.5px solid var(--dashed); color: #1B1B1B; background: transparent; transition: background .2s ease, border-color .2s ease, transform .3s var(--ease-bounce); } .ds-subtask__text { font-size: var(--text-sm); background: linear-gradient(currentColor, currentColor) 0 55% / 0% 1px no-repeat; transition: background-size .4s var(--ease), color .25s ease; } .ds-subtask[aria-checked="true"] .ds-subtask__box { background: var(--tone-green-dot); border-color: var(--tone-green-dot); } .ds-subtask[aria-checked="true"] .ds-subtask__text { color: var(--muted); background-size: 100% 1px; } /* ---------- Pílulas, chips e selos ---------- */ .ds-pill { display: inline-flex; align-items: center; gap: 6px; height: var(--control-2xs); padding: 0 9px; border-radius: var(--radius-pill); font-size: var(--text-2xs); font-weight: 600; white-space: nowrap; background: var(--tag); color: var(--text-2); } .ds-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--chip); border: 1px solid var(--border); color: var(--text-2); } .ds-chip__dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; } .ds-chip--toned { border: 0; font-weight: 600; } /* Bolinha de cor: sempre círculo, só dois tamanhos (8px padrão, 6px pequena). Coluna, status, prioridade, tag, destino: todas iguais. */ .ds-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; } .ds-dot--sm { width: 6px; height: 6px; flex: 0 0 6px; } .ds-dot--round { border-radius: 50%; } /* legado: toda .ds-dot já é redonda */ /* Tons: aplique em pílula/chip/aviso. Ex.: class="ds-pill ds-tone" style="--t:green" não funciona em CSS puro, então há uma classe por tom: */ .tone-green { background: var(--tone-green-bg); color: var(--tone-green-fg); } .tone-mint { background: var(--tone-mint-bg); color: var(--tone-mint-fg); } .tone-teal { background: var(--tone-teal-bg); color: var(--tone-teal-fg); } .tone-cyan { background: var(--tone-cyan-bg); color: var(--tone-cyan-fg); } .tone-blue { background: var(--tone-blue-bg); color: var(--tone-blue-fg); } .tone-vivid { background: var(--tone-vivid-bg); color: var(--tone-vivid-fg); } .tone-indigo { background: var(--tone-indigo-bg); color: var(--tone-indigo-fg); } .tone-purple { background: var(--tone-purple-bg); color: var(--tone-purple-fg); } .tone-violet { background: var(--tone-violet-bg); color: var(--tone-violet-fg); } .tone-pink { background: var(--tone-pink-bg); color: var(--tone-pink-fg); } .tone-rose { background: var(--tone-rose-bg); color: var(--tone-rose-fg); } .tone-red { background: var(--tone-red-bg); color: var(--tone-red-fg); } .tone-coral { background: var(--tone-coral-bg); color: var(--tone-coral-fg); } .tone-orange { background: var(--tone-orange-bg); color: var(--tone-orange-fg); } .tone-amber { background: var(--tone-amber-bg); color: var(--tone-amber-fg); } .tone-yellow { background: var(--tone-yellow-bg); color: var(--tone-yellow-fg); } .tone-lime { background: var(--tone-lime-bg); color: var(--tone-lime-fg); } .tone-olive { background: var(--tone-olive-bg); color: var(--tone-olive-fg); } .tone-brown { background: var(--tone-brown-bg); color: var(--tone-brown-fg); } .tone-slate { background: var(--tone-slate-bg); color: var(--tone-slate-fg); } .tone-gray { background: var(--tone-gray-bg); color: var(--tone-gray-fg); } .tone-accent { background: var(--accent-16); color: var(--accent-text); } /* ---------- Avatar ---------- */ .ds-avatar { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; display: grid; place-items: center; font-size: var(--text-3xs); font-weight: 700; border: 1.5px solid var(--accent); background: var(--accent-12); color: var(--accent); } [data-theme="light"] .ds-avatar { color: var(--text); background: var(--accent-16); } /* Avatar de pessoa do padrão (1.39, ArtUI.avatar): sem borda, fundo na cor .2, iniciais na cor; com foto, anel da cor do fundo */ .ds-avatar--plain { border: 0; background: color-mix(in srgb, var(--c, var(--accent)) 20%, transparent); color: var(--c, var(--accent)); } [data-theme="light"] .ds-avatar--plain { color: var(--text); } .ds-avatar--photo { border: 0; background: var(--hover) center/cover no-repeat; color: transparent; box-shadow: 0 0 0 1.5px var(--surface); } .ds-avatar--sm { width: 22px; height: 22px; flex-basis: 22px; font-size: 9px; } .ds-avatar--lg { width: 42px; height: 42px; flex-basis: 42px; font-size: 14px; border-width: 2px; background: var(--hover); color: var(--text); } .ds-avatar--empty { border: 1px dashed var(--dashed); background: transparent; color: var(--muted); } .ds-avatar-stack { display: inline-flex; } .ds-avatar-stack > .ds-avatar + .ds-avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--ring, var(--surface)); } .ds-avatar-stack__more { margin-left: 4px; align-self: center; font-size: var(--text-2xs); font-weight: 700; color: var(--muted); } /* Marca da empresa */ .ds-company-mark { width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--radius-md); background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: var(--text-xs); font-weight: 700; } /* ---------- Card do Kanban ---------- */ .ds-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); cursor: grab; transition: border-color .2s ease, box-shadow .25s ease; } .ds-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-card-hover); } .ds-card--compact { padding: 12px; gap: 8px; } .ds-card--ghost { border-color: var(--accent-55); box-shadow: var(--shadow-ghost); transform: rotate(-2deg) scale(1.045); cursor: grabbing; } .ds-card__divider { height: 1px; background: var(--border); } .ds-card__reveal { max-width: 0; opacity: 0; overflow: hidden; transition: max-width .3s var(--ease), opacity .2s ease; } .ds-card:hover .ds-card__reveal { max-width: 80px; opacity: 1; } .ds-drop-slot { border-radius: var(--radius-card); border: 2px dashed var(--accent-55); background: var(--accent-08); } /* ---------- Coluna ---------- */ .ds-column { flex: 0 0 var(--column-width); display: flex; flex-direction: column; gap: 12px; padding: 8px; border-radius: var(--radius-column); } .ds-column__head { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 6px 0 12px; border-radius: 13px; box-shadow: inset 0 0 0 1px var(--col-18, var(--border)), inset 0 1px 0 var(--col-30, transparent), 0 10px 22px -14px rgba(0,0,0,.8); background: linear-gradient(100deg, var(--col-bg-a, var(--hover)) 0%, var(--col-bg-b, transparent) 55%, transparent 100%), var(--page); } .ds-column__add { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; height: var(--control-3xl); border-radius: var(--radius-xl); font-size: var(--text-sm); font-weight: 600; cursor: pointer; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); box-shadow: 0 8px 20px -12px rgba(0,0,0,.7); transition: background .25s ease, border-color .25s ease, color .2s ease, box-shadow .3s ease, transform .35s var(--ease-overshoot); } .ds-column__add:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -10px var(--accent-55); color: var(--text); } /* ---------- Barra de progresso ---------- */ .ds-progress { position: relative; display: flex; width: 96px; height: 6px; border-radius: var(--radius-pill); overflow: hidden; background: var(--hover); } .ds-progress > span { height: 100%; transition: width .5s var(--ease); } /* ---------- Menu / dropdown / popover ---------- */ .ds-menu { min-width: 248px; max-height: min(420px, 70vh); padding: 6px; border-radius: var(--radius-2xl); background: var(--menu); border: 1px solid var(--border); box-shadow: var(--shadow-menu); display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; transform-origin: top left; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.95); pointer-events: none; transition: opacity .14s ease, transform .18s ease, visibility 0s linear .18s; } .ds-menu[data-open="true"] { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .2s ease, transform .34s var(--ease-overshoot), visibility 0s; } .ds-menu--popover { position: fixed; z-index: var(--z-popover); } .ds-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text); font-size: var(--text-sm); text-align: left; cursor: pointer; transition: background .15s ease; } .ds-menu__item:hover, .ds-menu__item[data-active="true"] { background: var(--hover); } .ds-menu__item svg { color: var(--muted); flex: none; } .ds-menu__item .ds-menu__check { margin-left: auto; color: var(--accent-text); } .ds-menu__hint { margin-left: auto; font-size: var(--text-xs); color: var(--muted); font-variant-numeric: tabular-nums; } .ds-menu__sep { height: 1px; background: var(--border); margin: 6px 4px; flex: none; } .ds-menu__search { display: flex; align-items: center; gap: 8px; flex: none; height: 36px; margin: 0 0 4px; padding: 0 10px; border-radius: var(--radius-md); background: var(--hover); color: var(--muted); } .ds-menu__search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--text); font-size: var(--text-sm); } .ds-menu__empty { font-size: var(--text-xs); color: var(--muted); padding: 10px; } .ds-menu__create { color: var(--accent-text); font-weight: 600; } .ds-menu__foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); font-size: var(--text-2xs); color: var(--muted); } /* entrada em cascata dos itens */ .ds-menu[data-open="true"] .ds-menu__item { animation: ds-item-in .32s var(--ease) both; } .ds-menu[data-open="true"] .ds-menu__item:nth-child(1) { animation-delay: 50ms; } .ds-menu[data-open="true"] .ds-menu__item:nth-child(2) { animation-delay: 78ms; } .ds-menu[data-open="true"] .ds-menu__item:nth-child(3) { animation-delay: 106ms; } .ds-menu[data-open="true"] .ds-menu__item:nth-child(4) { animation-delay: 134ms; } .ds-menu[data-open="true"] .ds-menu__item:nth-child(5) { animation-delay: 162ms; } .ds-menu[data-open="true"] .ds-menu__item:nth-child(6) { animation-delay: 190ms; } .ds-menu[data-open="true"] .ds-menu__item:nth-child(n+7) { animation-delay: 218ms; } @keyframes ds-item-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .ds-chevron { transition: transform .3s var(--ease); opacity: .7; flex: none; } [aria-expanded="true"] > .ds-chevron { transform: rotate(180deg); } /* ---------- Seletor de cor ---------- */ .ds-swatch-btn { width: 30px; height: 30px; border-radius: var(--radius-sm); display: grid; place-items: center; border: 1px solid var(--border); background: transparent; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; } .ds-swatch-btn:hover { border-color: var(--border-hover); } .ds-swatch-btn[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-18); } .ds-swatch-btn > i { width: 14px; height: 14px; border-radius: 4px; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); } .ds-swatch-grid { display: grid; grid-template-columns: repeat(5, 28px); gap: 8px; padding: 4px 6px 6px; } .ds-swatch { width: 28px; height: 28px; border-radius: var(--radius-sm); border: 0; padding: 0; cursor: pointer; background: var(--c); display: grid; place-items: center; color: #1B1B1B; transition: transform .2s var(--ease-overshoot), box-shadow .2s ease; } .ds-swatch:hover { transform: scale(1.08); } .ds-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--menu), 0 0 0 4px var(--c); } .ds-swatch--none { background: repeating-linear-gradient(135deg, var(--hover) 0 4px, transparent 4px 8px); box-shadow: inset 0 0 0 1px var(--border); color: var(--muted); } /* ---------- Dialog ---------- */ .ds-overlay { position: fixed; inset: 0; z-index: var(--z-dialog); display: flex; justify-content: center; align-items: flex-start; padding: var(--dialog-top) 16px 24px; overflow-y: auto; scrollbar-width: none; background: var(--overlay); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, visibility 0s linear .22s; } .ds-overlay[data-open="true"] { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .28s ease, visibility 0s; } .ds-dialog { position: relative; width: var(--dialog-md); max-width: 100%; max-height: calc(100vh - var(--dialog-top) - 24px); display: flex; flex-direction: column; background: var(--dialog); border: 1px solid var(--border); border-radius: var(--radius-dialog); box-shadow: var(--shadow-dialog); transform: translateY(16px) scale(.97); opacity: 0; transition: width .4s var(--ease), transform .38s cubic-bezier(.2,.9,.25,1.05), opacity .25s ease; } .ds-overlay[data-open="true"] .ds-dialog { transform: none; opacity: 1; } .ds-dialog--sm { width: var(--dialog-sm); } .ds-dialog--lg { width: var(--dialog-lg); } .ds-dialog--behind { transform: translateY(-10px) scale(.965) !important; opacity: .55 !important; } .ds-dialog__header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 14px 14px 18px; border-bottom: 1px solid var(--line); flex: none; } .ds-dialog__head-icon { width: 38px; height: 38px; flex: 0 0 38px; border-radius: var(--radius-lg); background: var(--accent-16); color: var(--accent-text); display: grid; place-items: center; } .ds-dialog__body { display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 24px; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; } .ds-dialog__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px 12px 18px; border-top: 1px solid var(--line); flex: none; } .ds-dialog__footer .ds-spacer { flex: 1; } /* ---------- Caixa de aviso (callout) ---------- */ .ds-callout { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 12px 12px 14px; border-radius: var(--radius-xl); background: var(--accent-08); border: 1px solid var(--accent-30); font-size: var(--text-sm); } .ds-callout--warn { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; border-radius: var(--radius-md); font-size: var(--text-xs); line-height: 1.45; border: 0; background: var(--tone-orange-bg); color: var(--tone-orange-fg); } .ds-callout--danger { border: 0; background: var(--tone-red-bg); color: var(--tone-red-fg); } /* ---------- Toast (pilha, até 3) ---------- */ .ds-toast-stack { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; } .ds-toast { display: flex; align-items: center; gap: 10px; padding: 11px 10px 11px 14px; border-radius: var(--radius-xl); background: var(--inverse-bg); color: var(--inverse-fg); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; box-shadow: 0 18px 40px rgba(0,0,0,.5); pointer-events: auto; transition: opacity .3s ease, transform .32s var(--ease); animation: ds-toast-in .48s var(--ease) both; } [data-theme="light"] .ds-toast { box-shadow: 0 18px 40px rgba(0,0,0,.18); } .ds-toast[data-age="older"] { opacity: .82; transform: scale(.96); } .ds-toast[data-leaving="true"] { opacity: 0; transform: translateY(-8px) scale(.94); } .ds-toast__icon { color: var(--toast-ok); flex: 0 0 16px; display: grid; place-items: center; animation: ds-check-pop .52s ease-out .14s backwards; } .ds-toast__action { margin-left: 4px; padding: 4px 10px; border-radius: var(--radius-sm); border: 0; cursor: pointer; font-size: var(--text-xs); font-weight: 700; color: inherit; background: var(--toast-action-bg); } .ds-toast__close { width: 22px; height: 22px; border-radius: 50%; border: 0; background: transparent; color: inherit; opacity: .6; display: grid; place-items: center; cursor: pointer; } .ds-toast__close:hover { opacity: 1; } @keyframes ds-toast-in { 0% { opacity: 0; transform: translateY(22px) scale(.9); } 70% { opacity: 1; transform: translateY(-3px) scale(1.02); } 100% { opacity: 1; transform: none; } } @keyframes ds-check-pop { 0% { transform: scale(0) rotate(-40deg); } 60% { transform: scale(1.3) rotate(8deg); } 100% { transform: none; } } /* ---------- Tooltip ---------- */ .ds-tooltip { position: fixed; z-index: var(--z-tooltip); pointer-events: none; max-width: 260px; padding: 6px 10px; border-radius: 9px; font: 600 12px/1.35 var(--font-sans); letter-spacing: .01em; background: var(--inverse-bg); color: var(--inverse-fg); box-shadow: var(--shadow-tooltip); } .ds-tooltip::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; background: inherit; transform: rotate(45deg); } /* ---------- Trava de voo ---------- */ .ds-flight-lock { position: absolute; inset: 0; z-index: var(--z-flight-lock); cursor: progress; background: var(--flight-lock); } /* ---------- Erro: tremida ---------- */ .ds-shake { animation: ds-shake .44s ease-out; } @keyframes ds-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-4px); } } /* ---------- Segmentado com trilho no acento (Minha visualização / Quadro · todos) ---------- */ .ds-seg { position: relative; display: flex; padding: 3px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); } .ds-seg__thumb { position: absolute; top: 3px; left: 3px; height: 34px; width: calc((100% - 6px) / var(--n, 2)); border-radius: 9px; background: var(--accent-20); box-shadow: inset 0 0 0 1px rgba(140,114,219,.38); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .5s var(--ease-bounce); } [data-theme="light"] .ds-seg__thumb { background: rgba(140,114,219,.13); box-shadow: inset 0 0 0 1px var(--accent-30); } .ds-seg__btn { position: relative; z-index: 1; flex: 1; height: 34px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; background: transparent; border-radius: 9px; cursor: pointer; font-size: var(--text-sm); font-weight: 500; color: var(--muted); transition: color .25s ease; } .ds-seg__btn[aria-selected="true"], .ds-seg__btn[aria-checked="true"] { color: var(--accent-text); font-weight: 600; } /* Abas neutras (Dados do quadro: Geral, Prioridades, Tags, Padrões) */ .ds-tabs { position: relative; display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); padding: 3px; border-radius: var(--radius-lg); background: var(--hover); } .ds-tabs__thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n, 2)); border-radius: 9px; background: var(--dialog); box-shadow: 0 1px 3px rgba(0,0,0,.4); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .38s cubic-bezier(.2,.9,.25,1.12); } [data-theme="light"] .ds-tabs__thumb { box-shadow: 0 1px 3px rgba(0,0,0,.12); } .ds-tabs__btn { position: relative; z-index: 1; height: 34px; border: 0; border-radius: var(--radius-item); background: transparent; cursor: pointer; font-size: var(--text-sm); font-weight: 600; white-space: nowrap; color: var(--muted); transition: color .2s ease; } .ds-tabs__btn[aria-selected="true"] { color: var(--text); } .ds-tabs__count { margin-left: 6px; font-size: var(--text-2xs); font-weight: 700; color: var(--muted); } /* ---------- Pílula selecionável (rádio) e chip de seleção múltipla ---------- */ .ds-choice { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: transparent; color: var(--text-2); cursor: pointer; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; transition: background .2s ease, border-color .2s ease, color .2s ease; } .ds-choice[aria-checked="true"] { background: var(--accent-16); color: var(--accent-text); border-color: rgba(140,114,219,.5); } [data-theme="light"] .ds-choice[aria-checked="true"] { background: rgba(140,114,219,.1); } .ds-choice__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .ds-choice--add { border-style: dashed; } .ds-choice--add[aria-expanded="true"] { border-color: var(--accent); } /* Chip removível (tag escolhida, pessoa) */ .ds-chip-x { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 4px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; background: var(--surface); color: var(--text); border: 1px solid var(--border); } .ds-chip-x--tag { border-radius: 8px; padding-left: 9px; border-color: color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); } [data-theme="light"] .ds-chip-x--tag { background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--text); } .ds-chip-x button { width: 20px; height: 20px; border-radius: 50%; border: 0; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; opacity: .6; } .ds-chip-x button:hover { opacity: 1; } /* Adicionar tracejado (1.39): vazio “Adicionar responsável”, com valor “+” / “+ Tag” */ .ds-add { font: inherit; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px dashed var(--border); background: transparent; color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; } .ds-add--tag { border-radius: 8px; } /* Selo de entidade (prioridade/tag na configuração): caixa alta, cor da paleta */ .ds-entity { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); } [data-theme="light"] .ds-entity { background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--text); } /* ---------- Caixa de opção (cartão selecionável) ---------- */ .ds-option { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; border-radius: var(--radius-xl); cursor: pointer; text-align: left; color: var(--text); background: var(--surface); border: 1px solid var(--border); transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; } .ds-option[aria-checked="true"] { background: rgba(140,114,219,.1); border-color: var(--accent-55); box-shadow: 0 0 0 3px rgba(140,114,219,.14); } /* ---------- Listas e grupos de configuração ---------- */ .ds-section-title { margin: 0; font-size: var(--text-2xs); font-weight: 700; letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--muted); } .ds-group { border-radius: var(--radius-2xl); background: var(--surface); border: 1px solid var(--border); overflow: hidden; } .ds-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; } .ds-group > .ds-row + .ds-row { border-top: 1px solid var(--line); } .ds-row__icon { width: 34px; height: 34px; flex: none; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--hover); color: var(--muted); transition: background .25s ease, color .25s ease; } .ds-row__icon[data-on="true"] { background: var(--accent-16); color: var(--accent-text); } .ds-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ds-row__title { font-size: var(--text-body); font-weight: 500; } .ds-row__desc { font-size: var(--text-xs); line-height: 1.45; color: var(--muted); } .ds-grip { width: 24px; height: 32px; flex: none; border: 0; border-radius: 7px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: grab; touch-action: none; opacity: .7; } .ds-step-num { width: 24px; height: 24px; flex: none; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: var(--text-xs); font-weight: 700; background: var(--accent-16); color: var(--accent-text); } /* ---------- Abrir/fechar com altura automática ---------- */ .ds-collapse { display: grid; grid-template-rows: 0fr; grid-template-columns: minmax(0, 1fr); opacity: 0; pointer-events: none; transition: grid-template-rows .35s ease, opacity .25s ease; } .ds-collapse > * { overflow: hidden; min-height: 0; } .ds-collapse[data-open="true"] { grid-template-rows: 1fr; opacity: 1; pointer-events: auto; } .ds-collapse[data-open="true"] > * { animation: ds-unclip 0s linear .35s forwards; } @keyframes ds-unclip { to { overflow: visible; } } /* ---------- Estado vazio ---------- */ .ds-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border-radius: var(--radius-lg); border: 1px dashed var(--border); } .ds-empty__title { font-size: var(--text-sm); font-weight: 600; } .ds-empty__text { font-size: var(--text-xs); color: var(--muted); } /* ---------- Confirmação dentro da linha ---------- */ .ds-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: var(--radius-md); background: var(--tone-orange-bg); color: var(--tone-orange-fg); font-size: var(--text-sm); } .ds-confirm--danger { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; border-radius: var(--radius-lg); background: var(--tone-red-bg); color: var(--tone-red-fg); border: 1px solid rgba(224,108,117,.4); } /* ---------- Status e carregamento ---------- */ .ds-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; } .ds-status-dot[data-on="true"] { background: var(--tone-green-dot); box-shadow: 0 0 0 4px rgba(143,216,106,.2); } .ds-status-dot[data-dirty="true"] { background: var(--tone-orange-dot); box-shadow: 0 0 0 4px rgba(219,134,72,.2); } .ds-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #FFFFFF; display: inline-block; animation: ds-spin .7s linear infinite; } .ds-spinner--muted { border-color: var(--border); border-top-color: var(--muted); } @keyframes ds-spin { to { transform: rotate(360deg); } } /* ---------- Drawer lateral (Preferências) ---------- */ .ds-drawer-overlay { position: fixed; inset: 0; z-index: var(--z-dialog); display: flex; justify-content: flex-end; background: rgba(10,10,10,.3); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility 0s linear .4s; } [data-theme="light"] .ds-drawer-overlay { background: rgba(27,27,27,.12); } .ds-drawer-overlay[data-open="true"] { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s ease, visibility 0s; } .ds-drawer { width: 460px; max-width: calc(100% - 20px); height: calc(100% - 20px); margin: 10px; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; background: var(--dialog); border: 1px solid var(--border); border-radius: 20px; box-shadow: -30px 0 80px rgba(0,0,0,.5); transform: translateX(calc(100% + 20px)); transition: transform .45s var(--ease); } [data-theme="light"] .ds-drawer { box-shadow: -30px 0 80px rgba(27,27,27,.16); } .ds-drawer-overlay[data-open="true"] .ds-drawer { transform: none; } /* ========================================================================== Versão 1.2 · 18 out 2026 Interação, Kanban (faixa, menus, seleção), Filtros, Listagem, Conversas, Task (painéis) e padrões das telas de configuração. ========================================================================== */ @keyframes ds-kx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes ds-kx-pop { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: none; } } @keyframes ds-pulse-scale { 0%, 100% { transform: none; } 40% { transform: scale(1.08); } } @keyframes ds-ring-flash { from { box-shadow: 0 0 0 0 var(--accent-55); } to { box-shadow: 0 0 0 10px rgba(140,114,219,0); } } @keyframes ds-ring-land { from { box-shadow: 0 0 0 0 var(--accent-55); } to { box-shadow: 0 0 0 12px rgba(140,114,219,0); } } @keyframes ds-row-glow { from { background-color: rgba(140,114,219,.3); box-shadow: inset 0 0 0 1.5px rgba(140,114,219,.75); } to { background-color: transparent; box-shadow: inset 0 0 0 1.5px rgba(140,114,219,0); } } @keyframes ds-bar-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes ds-chat-swap { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes ds-fan-in { from { opacity: 0; transform: translateY(-8px) scale(.94); } to { opacity: 1; transform: none; } } /* ---------- Foco por teclado: anel no acento, sem outline ---------- */ :where(.ds-root) :where(button, a, [tabindex], [role="button"], [role="tab"], [role="radio"], [role="checkbox"], [role="switch"], [role="option"], [role="menuitem"]):focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(140,114,219,.4); border-color: rgba(140,114,219,.8); } .ds-focus-demo { outline: none; box-shadow: 0 0 0 3px rgba(140,114,219,.4) !important; border-color: rgba(140,114,219,.8) !important; } /* ---------- Rolagem fina estilo macOS (data-mscroll) ---------- */ [data-mscroll] { overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: transparent transparent; } [data-mscroll]:hover { scrollbar-color: var(--scroll-thumb) transparent; } /* ---------- Hover deslizante (data-glide + data-glide-item) ---------- */ [data-glide] { position: relative; isolation: isolate; } .ds-glide { position: absolute; top: 0; left: 0; z-index: -1; pointer-events: none; opacity: 0; border-radius: var(--radius-item); background: var(--hover-glide); transition: transform var(--duration-glide) var(--ease-glide), width var(--duration-glide) var(--ease-glide), height var(--duration-glide) var(--ease-glide), border-radius var(--duration-glide) var(--ease-glide), opacity var(--duration-fast) ease; } .ds-glide[data-on="true"] { opacity: 1; } [data-glide-fast] > .ds-glide { transition-duration: var(--duration-glide-fast), var(--duration-glide-fast), var(--duration-glide-fast), var(--duration-glide-fast), var(--duration-fast); } [data-glide="over"] > .ds-glide { z-index: 2; background: var(--hover-glide-over); } [data-glide] [data-glide-item]:not([aria-selected="true"]):not([data-active="true"]):hover { background-color: transparent; } .ds-glide-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: var(--radius-item); background: transparent; color: var(--text); font-size: var(--text-sm); text-align: left; cursor: pointer; } .ds-glide-item svg { color: var(--muted); flex: none; } /* ---------- Popover do quadro (menu da coluna, menu do card, Filtros, Listagem, Conversas) ---------- */ .ds-pop { position: fixed; z-index: var(--z-card-menu); width: var(--menu-column); max-height: calc(100vh - 16px); display: flex; flex-direction: column; gap: 1px; padding: 6px; border-radius: var(--radius-xl); background: var(--menu); border: 1px solid var(--border); box-shadow: var(--shadow-menu); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; transform-origin: top left; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px) scale(.97); transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s; } .ds-pop[data-open="true"] { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .16s ease, transform var(--duration-menu-open) cubic-bezier(.2,.9,.25,1.06), visibility 0s; } .ds-pop--context { width: var(--menu-context); scrollbar-width: thin; transform: scale(.96); } .ds-pop--submenu { z-index: var(--z-submenu); width: var(--menu-context); max-height: 420px; } .ds-pop--board { z-index: var(--z-board-popover); } .ds-pop--owner { z-index: var(--z-owner-popover); width: 260px; max-height: 300px; } .ds-pop--filter { z-index: var(--z-board-popover); border-radius: var(--radius-2xl); transform-origin: top right; } .ds-pop--filter-add { width: var(--menu-filter-add); max-height: min(560px, calc(100vh - 16px)); } .ds-pop--filter-edit { width: var(--menu-filter-edit); padding: 12px; gap: 10px; transition: width .3s var(--ease), opacity .12s ease, transform .12s ease, visibility 0s linear .12s; } .ds-pop--filter-edit[data-open="true"] { transition: width .3s var(--ease), opacity .16s ease, transform var(--duration-menu-open) cubic-bezier(.2,.9,.25,1.06), visibility 0s; } .ds-pop--filter-edit[data-wide="true"] { width: var(--menu-filter-range); } .ds-pop--views { width: var(--menu-views); } .ds-pop--family { z-index: var(--z-sheet); width: var(--menu-family); padding: 8px; } .ds-pop__head { display: flex; align-items: center; gap: 8px; padding: 6px 10px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border); font-size: var(--text-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-pop__group { padding: 8px 10px 4px; font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--muted); } .ds-pop__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 6px 10px; flex: none; border: 0; border-radius: var(--radius-item); background: transparent; color: var(--text); font-size: var(--text-sm); text-align: left; cursor: pointer; } .ds-pop__item > svg { width: 15px; height: 15px; flex: none; opacity: .75; } .ds-pop__item[aria-disabled="true"] { opacity: .45; cursor: default; } .ds-pop__item--danger { color: #F09AA1; } [data-theme="light"] .ds-pop__item--danger { color: #A23440; } .ds-pop__kbd { margin-left: auto; font-size: var(--text-xs); color: var(--muted); font-variant-numeric: tabular-nums; } .ds-pop__note { margin-left: auto; font-size: var(--text-2xs); color: var(--muted); } .ds-pop[data-open="true"] .ds-pop__item { animation: ds-kx-in .28s var(--ease) both; } .ds-pop[data-open="true"] .ds-pop__item:nth-child(2) { animation-delay: 14ms; } .ds-pop[data-open="true"] .ds-pop__item:nth-child(3) { animation-delay: 28ms; } .ds-pop[data-open="true"] .ds-pop__item:nth-child(4) { animation-delay: 42ms; } .ds-pop[data-open="true"] .ds-pop__item:nth-child(5) { animation-delay: 56ms; } .ds-pop[data-open="true"] .ds-pop__item:nth-child(6) { animation-delay: 70ms; } .ds-pop[data-open="true"] .ds-pop__item:nth-child(7) { animation-delay: 84ms; } .ds-pop[data-open="true"] .ds-pop__item:nth-child(n+8) { animation-delay: 98ms; } .ds-pop__search { position: sticky; top: -6px; z-index: 3; display: flex; align-items: center; gap: 8px; flex: none; height: 40px; margin: -6px -6px 4px; padding: 0 12px; border-bottom: 1px solid var(--border); background: var(--menu); border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; color: var(--muted); } .ds-pop__search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--text); font-size: var(--text-sm); } /* Faixa de ícones do menu de contexto do card */ .ds-icon-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 2px 0 4px; } .ds-icon-strip__btn { position: relative; height: 36px; border: 0; border-radius: var(--radius-item); background: transparent; color: var(--c, var(--text-2)); display: grid; place-items: center; cursor: pointer; transition: background .15s ease; } .ds-icon-strip__btn svg { width: 16px; height: 16px; } .ds-icon-strip__btn:hover { background: var(--hover); } .ds-icon-strip__btn[aria-expanded="true"] { background: var(--accent-16); box-shadow: inset 0 0 0 1px rgba(140,114,219,.5); } .ds-icon-strip__count { position: absolute; top: 3px; right: 9px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: var(--radius-pill); background: var(--accent); color: #FFFFFF; font-size: 9px; font-weight: 800; display: grid; place-items: center; } /* ---------- Coluna: cabeçalho tingido pela cor (--c) ---------- */ .ds-column--tinted .ds-column__head { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent), inset 0 1px 0 color-mix(in srgb, var(--c) 30%, transparent), 0 10px 22px -14px rgba(0,0,0,.8); background: linear-gradient(100deg, color-mix(in srgb, var(--c) 20%, transparent) 0%, color-mix(in srgb, var(--c) 7%, transparent) 55%, color-mix(in srgb, var(--c) 2%, transparent) 100%), var(--page); } [data-theme="light"] .ds-column--tinted .ds-column__head { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 36%, transparent), inset 0 1px 0 color-mix(in srgb, var(--c) 50%, transparent), 0 10px 22px -14px rgba(0,0,0,.25); background: linear-gradient(100deg, color-mix(in srgb, var(--c) 30%, transparent) 0%, color-mix(in srgb, var(--c) 13%, transparent) 55%, color-mix(in srgb, var(--c) 5%, transparent) 100%), var(--page); } .ds-column__head[data-menu-open="true"] { box-shadow: inset 0 0 0 1.5px rgba(140,114,219,.75), 0 10px 22px -14px rgba(0,0,0,.6) !important; } .ds-column[data-drop-over="true"] { background: rgba(140,114,219,.07); box-shadow: inset 0 0 0 1px rgba(140,114,219,.28); } [data-theme="light"] .ds-column[data-drop-over="true"] { background: rgba(140,114,219,.06); } .ds-column-lock { width: 20px; height: 20px; border-radius: var(--radius-tiny); background: var(--hover); color: var(--muted); display: grid; place-items: center; flex: none; } /* Coluna vazia */ .ds-column-empty { height: 168px; border-radius: var(--radius-card); border: 1.5px dashed var(--dashed); background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--faint); font-size: var(--text-xs); transition: border-color .2s ease, background .2s ease; } .ds-column-empty:hover { border-color: var(--accent-55); background: var(--accent-08); } [data-theme="light"] .ds-column-empty:hover { background: rgba(140,114,219,.06); } /* Coluna minimizada (faixa) */ .ds-column-strip { width: var(--column-mini-width); flex: 0 0 var(--column-mini-width); min-height: 240px; max-height: 460px; padding: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; border-radius: var(--radius-2xl); background: var(--mini); border: 1px solid var(--border); color: var(--text-2); box-shadow: inset 0 2px 0 color-mix(in srgb, var(--c, var(--muted)) 70%, transparent); transition: background .2s ease, transform .3s cubic-bezier(.2,.9,.25,1.06), border-color .2s ease, box-shadow .2s ease; } .ds-column-strip:hover { background: var(--hover); } .ds-column-strip__count { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--hover); display: grid; place-items: center; font-size: var(--text-2xs); font-weight: 700; font-variant-numeric: tabular-nums; } .ds-column-strip:hover .ds-column-strip__count { background: var(--border); } .ds-column-strip__name { writing-mode: vertical-rl; max-height: 330px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); font-weight: 600; } .ds-column-strip[data-receiving="true"] { transform: scale(1.04); background: var(--accent-16); border-color: rgba(140,114,219,.6); box-shadow: 0 14px 30px -14px rgba(140,114,219,.6); color: var(--text); } [data-theme="light"] .ds-column-strip[data-receiving="true"] { background: var(--accent-12); } .ds-column-strip[data-pulse="true"] { animation: ds-pulse-scale var(--duration-strip-pulse) var(--ease-overshoot); } .ds-column-strip--fan { animation: ds-fan-in .32s var(--ease) both; } /* Bloco “N colunas minimizadas” e “N colunas vazias” */ .ds-column-stack { width: var(--column-mini-width); flex: 0 0 var(--column-mini-width); height: 460px; padding: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; border-radius: var(--radius-2xl); background: var(--mini); border: 1px solid var(--border); color: var(--text-2); transition: background .2s ease; } .ds-column-stack:hover { background: var(--hover); } .ds-column-stack__label { writing-mode: vertical-rl; font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-overline); text-transform: uppercase; white-space: nowrap; color: var(--muted); } .ds-column-stack--empty { height: auto; min-height: 240px; background: transparent; border: 1.5px dashed var(--dashed); animation: ds-kx-in .35s var(--ease) both; } .ds-column-stack--empty:hover { background: transparent; border-color: var(--border-hover); } .ds-column-regroup { width: 26px; height: 120px; flex: none; border: 0; border-radius: var(--radius-lg); background: var(--mini); color: var(--muted); display: grid; place-items: center; cursor: pointer; animation: ds-fan-in .32s var(--ease) both; } .ds-column-regroup:hover { background: var(--hover); color: var(--text); } /* ---------- Card: seleção, alvo do menu, família, sino ---------- */ .ds-card__select { position: absolute; top: -7px; left: -7px; z-index: 2; width: 22px; height: 22px; padding: 0; cursor: pointer; border-radius: var(--radius-thumb); border: 1.5px solid var(--dashed); background: var(--surface); color: #FFFFFF; display: grid; place-items: center; box-shadow: var(--shadow-select-box); opacity: 0; transform: scale(.7); transition: opacity .2s ease, transform .25s cubic-bezier(.2,.9,.25,1.3), background .15s ease, border-color .15s ease; } .ds-card__select svg { opacity: 0; } .ds-card:hover .ds-card__select, [data-selecting="true"] .ds-card__select { opacity: 1; transform: none; } .ds-card__select[aria-checked="true"] { background: var(--accent); border-color: var(--accent); } .ds-card__select[aria-checked="true"] svg { opacity: 1; animation: ds-kx-pop .3s var(--ease-overshoot); } .ds-card[aria-selected="true"] { outline: 2px solid var(--accent); outline-offset: 2px; } .ds-card[data-context-target="true"] { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: var(--shadow-context-target); z-index: var(--z-card-open); } .ds-card[data-dim="true"] { opacity: .55; } .ds-card { transition: border-color .2s ease, box-shadow .25s ease, opacity .25s ease; } .ds-card[data-flash="true"] { animation: ds-ring-flash var(--duration-flash) var(--ease-glow); } .ds-card[data-landed="true"] { animation: ds-ring-land var(--duration-landed-ring) var(--ease-glow); } .ds-fam-chip, .ds-rel-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .ds-fam-chip { border: 1px solid var(--accent-30); background: rgba(140,114,219,.1); color: var(--accent-text); transition: border-color .2s ease; } [data-theme="light"] .ds-fam-chip { background: rgba(140,114,219,.07); } .ds-fam-chip:hover, .ds-fam-chip[data-hl="true"] { border-color: rgba(140,114,219,.6); } .ds-rel-chip { border: 1px solid var(--border); background: transparent; color: var(--text-2); } .ds-card[data-family="true"] { outline: 2px solid rgba(140,114,219,.6); outline-offset: 2px; } .ds-card[data-faded="true"] { opacity: .28; } .ds-bell { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 7px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap; } .ds-bell svg { width: 12px; height: 12px; flex: none; } .ds-bell[data-today="true"] { background: var(--accent-18); color: var(--accent-text); font-weight: 600; } [data-theme="light"] .ds-bell[data-today="true"] { background: var(--accent-12); } /* Pílula de não lidas: 22px no card do Kanban; --sm 18px na lista de Conversas */ .ds-unread { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--unread-bg); color: #FFFFFF; font-size: var(--text-2xs); font-weight: 700; font-variant-numeric: tabular-nums; flex: none; } .ds-unread--sm { min-width: 18px; height: 18px; padding: 0 5px; font-size: 10.5px; font-weight: 800; } /* Selo +N do arrasto em grupo e cartas empilhadas */ .ds-count-badge { position: absolute; top: -10px; right: -10px; z-index: 3; height: 26px; min-width: 26px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--accent); color: #FFFFFF; font-size: var(--text-xs); font-weight: 800; display: grid; place-items: center; box-shadow: var(--shadow-count-badge); animation: ds-kx-pop .3s var(--ease-overshoot); } .ds-ghost-stack { position: relative; } .ds-ghost-stack::before, .ds-ghost-stack::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); } .ds-ghost-stack::before { transform: translate(12px, 12px) rotate(-2deg); opacity: .5; } .ds-ghost-stack::after { transform: translate(6px, 6px) rotate(-2deg); opacity: .8; } .ds-ghost-stack > .ds-card { z-index: 1; } /* Barra de seleção do quadro (Kanban): fundo --menu, não invertida */ .ds-select-bar { display: inline-flex; align-items: center; gap: 4px; padding: 6px 6px 6px 14px; border-radius: var(--radius-2xl); background: var(--menu); border: 1px solid var(--border); box-shadow: var(--shadow-menu); animation: ds-select-bar-in .38s cubic-bezier(.2,.9,.25,1.15) both; } .ds-select-bar--fixed { position: fixed; left: 50%; bottom: 28px; z-index: var(--z-bulk-bar); translate: -50% 0; } @keyframes ds-select-bar-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } .ds-select-bar__count { margin-right: 8px; font-size: var(--text-sm); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } .ds-select-bar__btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-2); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; cursor: pointer; } .ds-select-bar__btn:hover { background: var(--hover); color: var(--text); } .ds-select-bar__btn[aria-expanded="true"] { background: var(--accent-12); color: var(--accent-text); } .ds-select-bar__btn--primary { background: var(--primary); color: var(--on-primary); font-weight: 600; padding: 0 14px; } .ds-select-bar__btn--primary:hover { background: var(--primary); color: var(--on-primary); box-shadow: 0 8px 20px -10px var(--accent-55); } .ds-select-bar__icon { width: 34px; padding: 0; justify-content: center; color: var(--muted); } /* Lugar de soltar no claro */ [data-theme="light"] .ds-drop-slot { background: rgba(140,114,219,.07); } /* ---------- Filtros ---------- */ .ds-btn--filter-on { border-color: rgba(140,114,219,.6) !important; background: rgba(140,114,219,.14); color: var(--accent-text); } [data-theme="light"] .ds-btn--filter-on { background: rgba(140,114,219,.08); } .ds-filter-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--accent); color: #FFFFFF; font-size: 10px; font-weight: 800; display: grid; place-items: center; animation: ds-kx-pop .3s var(--ease-overshoot); } .ds-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px var(--page-gutter); border-bottom: 1px solid var(--line); animation: ds-kx-in .3s var(--ease) both; } .ds-filter-bar .ds-spacer { flex: 1; } .ds-view-badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: var(--radius-pill); background: var(--hover); color: var(--text-2); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; } .ds-view-badge svg { width: 12px; height: 12px; } .ds-view-badge__changed { font-weight: 500; color: var(--muted); } .ds-cond { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 4px 0 10px; border-radius: var(--radius-md); border: 1px solid rgba(140,114,219,.45); background: rgba(140,114,219,.1); color: var(--text); font-size: var(--text-xs); cursor: pointer; white-space: nowrap; animation: ds-kx-pop .32s cubic-bezier(.2,.9,.25,1.25); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } [data-theme="light"] .ds-cond { background: rgba(140,114,219,.06); } .ds-cond__icon { width: 13px; height: 13px; opacity: .7; flex: none; } .ds-cond__label { font-weight: 600; color: var(--muted); } .ds-cond__value { font-weight: 700; color: var(--accent-text); max-width: 240px; overflow: hidden; text-overflow: ellipsis; } .ds-cond__x { width: 22px; height: 22px; border: 0; border-radius: var(--radius-tiny); background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; } .ds-cond__x:hover { background: var(--hover); color: var(--text); } .ds-cond[data-incomplete="true"] { border-style: dashed; border-color: var(--dashed); background: transparent; } .ds-cond[data-incomplete="true"] .ds-cond__value { color: var(--muted); font-weight: 600; } .ds-cond[data-editing="true"] { border-style: solid; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-18); } .ds-cond[data-leaving="true"] { transform: scale(.6); opacity: 0; transition: transform .17s cubic-bezier(.4,0,1,1), opacity .17s ease; } .ds-filter-add { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--radius-md); border: 1px dashed var(--dashed); background: transparent; color: var(--muted); font-size: var(--text-xs); font-weight: 600; cursor: pointer; } .ds-filter-add:hover { color: var(--text); border-color: var(--border-hover); } .ds-match-toggle { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: transparent; color: var(--text-2); font-size: var(--text-xs); font-weight: 600; cursor: pointer; white-space: nowrap; } .ds-filter-count { font-size: var(--text-xs); font-weight: 700; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; } .ds-filter-mini { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--text-2); font-size: var(--text-xs); font-weight: 600; cursor: pointer; white-space: nowrap; } .ds-filter-mini--plain { border-color: transparent; color: var(--muted); } .ds-filter-mini:hover { color: var(--text); } .ds-fx-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: transparent; color: var(--text-2); font-size: var(--text-xs); font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s ease, border-color .15s ease, color .15s ease; animation: ds-kx-in .28s var(--ease) both; } .ds-fx-pill svg { width: 12px; height: 12px; } .ds-fx-pill[aria-pressed="true"], .ds-fx-pill[aria-checked="true"] { border-color: rgba(140,114,219,.6); background: var(--accent-16); color: var(--accent-text); } [data-theme="light"] .ds-fx-pill[aria-pressed="true"], [data-theme="light"] .ds-fx-pill[aria-checked="true"] { background: rgba(140,114,219,.1); } .ds-fx-head { display: flex; align-items: center; gap: 8px; font-size: var(--text-body); font-weight: 700; } .ds-fx-head svg { width: 15px; height: 15px; color: var(--muted); } .ds-fx-foot { display: flex; align-items: center; gap: 8px; padding-top: 10px; margin-top: 2px; border-top: 1px solid var(--border); } .ds-fx-foot .ds-spacer { flex: 1; } .ds-fx-remove { height: 30px; padding: 0 8px; border: 0; border-radius: var(--radius-item); background: transparent; color: #F09AA1; font-size: var(--text-xs); font-weight: 600; cursor: pointer; } [data-theme="light"] .ds-fx-remove { color: #A23440; } .ds-fx-done { height: 30px; padding: 0 14px; border: 0; border-radius: var(--radius-item); background: var(--primary); color: var(--on-primary); font-size: var(--text-xs); font-weight: 700; cursor: pointer; } .ds-fx-note { font-size: var(--text-xs); line-height: 1.45; color: var(--muted); } .ds-check-row { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px 8px; border: 0; border-radius: var(--radius-item); background: transparent; color: var(--text); font-size: var(--text-sm); text-align: left; width: 100%; cursor: pointer; } .ds-check-row .ds-check { border-radius: var(--radius-xs); } /* Calendário (Filtros · Entre; dias 30px) */ .ds-cal { display: grid; grid-template-columns: repeat(7, 30px); gap: 2px 0; font-size: var(--text-xs); } .ds-cal__dow { height: 22px; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; } .ds-cal__day { height: 30px; border: 0; background: transparent; color: var(--text-2); font-size: var(--text-xs); font-variant-numeric: tabular-nums; cursor: pointer; border-radius: var(--radius-sm); } .ds-cal__day:hover { background: var(--hover); } .ds-cal__day[data-muted="true"] { color: var(--faint); opacity: .5; } .ds-cal__day[data-today="true"] { box-shadow: inset 0 0 0 1px rgba(140,114,219,.5); color: var(--accent-text); } .ds-cal__day[data-range="true"] { background: rgba(140,114,219,.18); border-radius: 0; } .ds-cal__day[data-preview="true"] { background: rgba(140,114,219,.1); border-radius: 0; } .ds-cal__day[data-end="true"] { background: var(--accent); color: #FFFFFF; border-radius: var(--radius-sm); font-weight: 700; } /* Visões */ .ds-views-note { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; margin-bottom: 4px; border-radius: var(--radius-md); background: var(--hover); color: var(--text-2); font-size: var(--text-xs); line-height: 1.4; } .ds-views-note svg { color: #E2C25B; flex: none; margin-top: 1px; } .ds-view-row { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 6px 4px 10px; border-radius: var(--radius-item); font-size: var(--text-sm); cursor: pointer; } .ds-view-row__meta { font-size: var(--text-2xs); color: var(--muted); } .ds-view-row[aria-current="true"] { background: rgba(140,114,219,.1); color: var(--accent-text); font-weight: 600; } .ds-star { width: 26px; height: 26px; margin-left: auto; flex: none; border: 0; border-radius: var(--radius-thumb); background: transparent; color: var(--muted); opacity: .4; display: grid; place-items: center; cursor: pointer; transition: opacity .15s ease; } .ds-view-row:hover .ds-star { opacity: .9; } .ds-star[aria-pressed="true"] { color: #E2C25B; opacity: 1; } .ds-star[aria-pressed="true"] svg { fill: currentColor; } /* ---------- Listagem ---------- */ .ds-list { --row-h: var(--list-row); } .ds-list[data-density="compact"] { --row-h: var(--list-row-compact); } .ds-list-bar { position: sticky; left: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; height: 44px; } .ds-list-bar__note { margin-right: auto; font-size: var(--text-xs); color: var(--faint); } .ds-list-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: var(--radius-item); border: 1px solid var(--border); background: transparent; color: var(--text-2); font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: border-color .2s ease, background .2s ease; } .ds-list-btn[aria-expanded="true"] { border-color: var(--accent-55); background: rgba(140,114,219,.14); } [data-theme="light"] .ds-list-btn[aria-expanded="true"] { background: rgba(140,114,219,.08); } .ds-density { position: relative; display: inline-grid; grid-template-columns: 30px 30px; padding: 2px; border-radius: var(--radius-item); border: 1px solid var(--border); } .ds-density__thumb { position: absolute; top: 2px; left: 2px; width: 30px; height: 24px; border-radius: var(--radius-thumb); background: var(--hover); transform: translateX(calc(var(--i, 0) * 30px)); transition: transform var(--duration-density) cubic-bezier(.2,.9,.25,1.12); } .ds-density__btn { position: relative; z-index: 1; width: 30px; height: 24px; border: 0; background: transparent; color: var(--text-2); display: grid; place-items: center; cursor: pointer; border-radius: var(--radius-thumb); } .ds-list-grid { display: grid; grid-template-columns: 44px 72px minmax(260px, 1fr) 128px 112px 120px; align-items: center; } .ds-list-head { height: 36px; border-bottom: 1px solid var(--line); background: var(--page); font-size: 11.5px; font-weight: 500; color: var(--faint); position: sticky; top: 0; z-index: 2; } .ds-list-head > * { padding: 0 8px; white-space: nowrap; } .ds-list-head__sort { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; padding: 0; } .ds-list-row { position: relative; height: var(--row-h); border-radius: var(--radius-md); font-size: var(--text-sm); content-visibility: auto; transition: height var(--duration-density) var(--ease), background-color .15s ease; } .ds-list-row > * { padding: 0 8px; min-width: 0; } .ds-list-row[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 13%, var(--page)); } [data-theme="light"] .ds-list-row[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 9%, var(--page)); } .ds-list-row[data-glow="true"] { animation: ds-row-glow 1.3s var(--ease-glow); } [data-theme="light"] .ds-list-row[data-glow="true"] { animation-name: ds-row-glow-light; } @keyframes ds-row-glow-light { from { background-color: rgba(140,114,219,.22); box-shadow: inset 0 0 0 1.5px rgba(140,114,219,.75); } to { background-color: transparent; box-shadow: inset 0 0 0 1.5px rgba(140,114,219,0); } } .ds-list-row__pick { display: flex; align-items: center; gap: 2px; padding: 0 0 0 2px !important; } .ds-list-grip { width: 14px; height: 24px; flex: none; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--muted); display: grid; place-items: center; cursor: grab; opacity: 0; transition: opacity .15s ease; padding: 0; } .ds-list-row:hover .ds-list-grip { opacity: .55; } .ds-list-row .ds-list-grip:hover { opacity: 1; } .ds-list-check { position: relative; width: 16px; height: 16px; flex: none; padding: 0; cursor: pointer; border-radius: var(--radius-xs); border: 1.5px solid var(--border-hover); background: transparent; color: #FFFFFF; display: grid; place-items: center; transition: background .15s ease, border-color .15s ease; } .ds-list-check svg { display: none; } .ds-list-check::after { content: ""; display: none; width: 8px; height: 2px; border-radius: 1px; background: #FFFFFF; } .ds-list-check[aria-checked="true"], .ds-list-check[aria-checked="mixed"] { background: var(--accent); border-color: var(--accent); } .ds-list-check[aria-checked="true"] svg { display: block; } .ds-list-check[aria-checked="mixed"]::after { display: block; } .ds-list-id { font-size: var(--text-xs); color: var(--faint); font-variant-numeric: tabular-nums; } .ds-list-task { display: flex; align-items: center; gap: 8px; position: relative; align-self: stretch; } .ds-list-task__title { font-size: var(--text-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-status-ring { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid var(--c, var(--muted)); background: color-mix(in srgb, var(--c, var(--muted)) 32%, transparent); } [data-theme="light"] .ds-status-ring { background: color-mix(in srgb, var(--c, var(--muted)) 26%, transparent); } .ds-list-empty { color: var(--muted); font-size: var(--text-xs); opacity: 0; transition: opacity .15s ease; } .ds-list-row:hover .ds-list-empty { opacity: 1; } /* ações da linha que aparecem no hover ou com o foco dentro (1.192) */ .ds-list-acts { display: flex; justify-content: flex-end; gap: 2px; opacity: 0; transition: opacity .18s ease; } .ds-list-row:hover .ds-list-acts, .ds-list-row:focus-within .ds-list-acts, .ds-line-row:hover .ds-list-acts, .ds-line-row:focus-within .ds-list-acts { opacity: 1; } .ds-child-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px 0 5px; border-radius: var(--radius-thumb); border: 1px solid var(--border); background: transparent; color: var(--text-2); font-size: var(--text-2xs); font-weight: 600; cursor: pointer; white-space: nowrap; } .ds-child-chip svg { transition: transform .3s var(--ease); } .ds-child-chip[aria-expanded="true"] svg { transform: rotate(90deg); } .ds-list-children { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .36s var(--ease), opacity .25s ease; } .ds-list-children > div { overflow: hidden; min-height: 0; } .ds-list-children[data-open="true"] { grid-template-rows: 1fr; opacity: 1; } .ds-list-guide { position: absolute; left: 14px; top: 0; bottom: 0; width: 12px; pointer-events: none; } .ds-list-guide::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1.5px solid var(--border); } .ds-list-guide::after { content: ""; position: absolute; left: 0; top: calc(var(--row-h) / 2); width: 10px; border-top: 1.5px solid var(--border); } .ds-list-guide--last::before { bottom: auto; height: calc(var(--row-h) / 2 - 7px); } .ds-list-guide--last::after { top: calc(var(--row-h) / 2 - 7px); width: 10px; height: 7px; border-top: 0; border-left: 1.5px solid var(--border); border-bottom: 1.5px solid var(--border); border-bottom-left-radius: 7px; } .ds-list-row--child .ds-list-task { padding-left: 36px; } .ds-prio-bars { display: inline-flex; align-items: flex-end; gap: 2px; width: 14px; height: 14px; flex: none; } .ds-prio-bars > i { width: 3px; border-radius: 1px; background: #474747; } [data-theme="light"] .ds-prio-bars > i { background: #CFCFCB; } .ds-prio-bars > i:nth-child(1) { height: 6px; } .ds-prio-bars > i:nth-child(2) { height: 10px; } .ds-prio-bars > i:nth-child(3) { height: 14px; } .ds-prio-bars[data-level="low"] > i:nth-child(1) { background: #A3A3A3; } [data-theme="light"] .ds-prio-bars[data-level="low"] > i:nth-child(1) { background: #767676; } .ds-prio-bars[data-level="medium"] > i:nth-child(-n+2) { background: #72A2DA; } .ds-prio-bars[data-level="high"] > i { background: #DB8648; } .ds-prio-urgent { width: 14px; height: 14px; flex: none; border-radius: 4px; background: #E06C75; color: #FFFFFF; font-size: 10px; font-weight: 800; display: grid; place-items: center; line-height: 1; } .ds-group-band { position: sticky; top: 36px; z-index: 1; display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 8px 0 10px; margin-top: 6px; border-radius: var(--radius-md); cursor: pointer; font-size: var(--text-sm); font-weight: 600; /* escuro: o degradê do cabeçalho da coluna do Kanban (29 out 2026, o usuário achou a faixa fraca); claro: a cor a 16% */ background: linear-gradient(100deg, color-mix(in srgb, var(--c, transparent) 22%, var(--page)) 0%, color-mix(in srgb, var(--c, transparent) 10%, var(--page)) 55%, color-mix(in srgb, var(--c, transparent) 5%, var(--page)) 100%); transition: filter .15s ease; } [data-theme="light"] .ds-group-band { background: color-mix(in srgb, var(--c, transparent) 16%, var(--page)); } .ds-group-band--plain { background: color-mix(in srgb, #FFFFFF 3.5%, var(--page)); } [data-theme="light"] .ds-group-band--plain { background: color-mix(in srgb, #000000 3%, var(--page)); } /* hover (6 nov 2026): no escuro clareia; no claro o brilho lavava o texto, então a tinta da faixa fica mais forte */ .ds-group-band:hover { filter: brightness(1.12); } [data-theme="light"] .ds-group-band:hover, [data-theme="light"] .ds-group-band--plain:hover { filter: none; } [data-theme="light"] .ds-group-band:not(.ds-group-band--plain):hover { background: color-mix(in srgb, var(--c, transparent) 26%, var(--page)); } [data-theme="light"] .ds-group-band--plain:hover { background: color-mix(in srgb, #000000 6%, var(--page)); } .ds-group-band .ds-list-check { opacity: 0; transition: opacity .15s ease, background .15s ease, border-color .15s ease; } .ds-group-band:hover .ds-list-check, .ds-group-band .ds-list-check[aria-checked="true"], .ds-group-band .ds-list-check[aria-checked="mixed"] { opacity: 1; } .ds-group-band__chev { color: var(--muted); transition: transform .3s var(--ease); } .ds-group-band[aria-expanded="false"] .ds-group-band__chev { transform: rotate(-90deg); } .ds-group-band__count { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; } .ds-group-avatar { width: 22px; height: 22px; flex: none; border-radius: var(--radius-thumb); display: grid; place-items: center; font-size: 9px; font-weight: 700; background: color-mix(in srgb, var(--c, #8E8E8E) 22%, transparent); color: var(--c, var(--muted)); } [data-theme="light"] .ds-group-avatar { color: var(--text); } .ds-list-group__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .36s var(--ease), opacity .25s ease; } .ds-list-group__body > div { overflow: hidden; min-height: 0; } .ds-list-group__body[data-open="false"] { grid-template-rows: 0fr; opacity: 0; } .ds-list-add { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 54px; border: 0; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 500; opacity: .7; cursor: pointer; width: 100%; text-align: left; transition: opacity .15s ease; } .ds-list-add:hover { opacity: 1; } .ds-list-input { display: flex; align-items: center; gap: 10px; height: var(--row-h); padding: 0 12px 0 54px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent) 8%, var(--page)); box-shadow: inset 0 0 0 1px rgba(140,114,219,.35); transition: height var(--duration-density) var(--ease); } [data-theme="light"] .ds-list-input { background: color-mix(in srgb, var(--accent) 5%, var(--page)); } .ds-list-input input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--text); font-size: var(--text-sm); } .ds-list-input__hint { font-size: var(--text-2xs); color: var(--faint); white-space: nowrap; } .ds-list-more { display: flex; align-items: center; gap: 8px; height: 36px; padding-left: 54px; font-size: var(--text-xs); color: var(--faint); } .ds-list-more button { border: 0; background: transparent; padding: 0; color: var(--accent-text); font: inherit; font-weight: 600; cursor: pointer; } .ds-spinner--accent { width: 12px; height: 12px; border: 2px solid var(--border); border-top-color: var(--accent); animation-duration: .8s; } .ds-list-vazio { height: 40px; display: flex; align-items: center; padding-left: 54px; font-size: 12.5px; color: var(--faint); } .ds-row-drag { background: var(--menu); border-radius: var(--radius-md); box-shadow: var(--shadow-row-drag); transform: scale(1.015) rotate(-.8deg); } .ds-drag-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--radius-sm); background: var(--inverse-bg); color: var(--inverse-fg); font-size: var(--text-xs); font-weight: 600; box-shadow: var(--shadow-tooltip); white-space: nowrap; } .ds-insert-line { height: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 0 2px var(--accent-18); } .ds-drag-count { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--accent); color: #FFFFFF; font-size: var(--text-2xs); font-weight: 700; } /* ---------- Conversas ---------- */ .ds-cv-tabs-wrap { position: relative; } .ds-cv-tabs { position: relative; display: flex; gap: 0; padding: 3px; border-radius: var(--radius-btn-38); background: var(--hover); overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; } .ds-cv-tabs::-webkit-scrollbar { display: none; } .ds-cv-tabs__thumb { position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: var(--radius-sm); background: var(--menu); box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform .32s cubic-bezier(.2,.9,.25,1.12), width .32s cubic-bezier(.2,.9,.25,1.12); } [data-theme="light"] .ds-cv-tabs__thumb { box-shadow: 0 1px 3px rgba(0,0,0,.12); } .ds-cv-tabs__btn { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 0; background: transparent; color: var(--muted); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; cursor: pointer; border-radius: var(--radius-sm); } .ds-cv-tabs__btn[aria-selected="true"] { color: var(--text); } .ds-cv-tabs__count { font-size: var(--text-2xs); font-weight: 700; opacity: .8; font-variant-numeric: tabular-nums; } .ds-cv-tabs__arrow { position: absolute; top: 0; bottom: 0; z-index: 2; width: 46px; display: flex; align-items: center; pointer-events: none; opacity: 0; transition: opacity .2s ease; } .ds-cv-tabs__arrow button { pointer-events: auto; width: 34px; height: 34px; border: 0; border-radius: var(--radius-md); background: var(--menu); color: var(--text-2); display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.3); } .ds-cv-tabs__arrow--l { left: 0; justify-content: flex-start; background: linear-gradient(90deg, var(--surface) 55%, transparent); transform: translateX(-8px); } .ds-cv-tabs__arrow--r { right: 0; justify-content: flex-end; background: linear-gradient(270deg, var(--surface) 55%, transparent); transform: translateX(8px); } .ds-cv-tabs__arrow[data-on="true"] { opacity: 1; transform: none; transition: opacity .2s ease, transform .3s var(--ease-bounce); } .ds-cv-tabs__arrow:not([data-on="true"]) button { pointer-events: none; } .ds-cv-card { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 9px 12px 9px 14px; border-radius: var(--radius-lg); cursor: pointer; } .ds-cv-card[aria-selected="true"] { background: var(--accent-14, rgba(140,114,219,.14)); box-shadow: inset 3px 0 0 var(--accent); } [data-theme="light"] .ds-cv-card[aria-selected="true"] { background: rgba(140,114,219,.09); } .ds-cv-card[data-marked="true"] { background: rgba(140,114,219,.1); } .ds-cv-card__l1 { display: flex; align-items: center; gap: 7px; height: 22px; min-width: 0; } /* modo lista: 2 linhas, sem a linha do cliente */ .ds-cv-card--dense { gap: 1px; padding: 6px 12px 6px 14px; border-radius: var(--radius-md); } .ds-cv-card--dense .ds-cv-card__l2 { display: none; } .ds-cv-card__l2, .ds-cv-card__l3 { display: flex; align-items: center; gap: 6px; padding-left: 17px; min-width: 0; } .ds-cv-status { width: 10px; height: 10px; flex: none; border-radius: 50%; border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 32%, transparent); } [data-theme="light"] .ds-cv-status { background: color-mix(in srgb, var(--c) 26%, transparent); } .ds-cv-card__pick { position: relative; width: 16px; height: 16px; flex: none; display: grid; place-items: center; margin-left: -3px; } .ds-cv-card__pick .ds-list-check { position: absolute; opacity: 0; } .ds-cv-card:hover .ds-cv-card__pick .ds-cv-status, .ds-cv-card[data-marked="true"] .ds-cv-card__pick .ds-cv-status, [data-marking="true"] .ds-cv-card__pick .ds-cv-status { opacity: 0; } .ds-cv-card:hover .ds-cv-card__pick .ds-list-check, .ds-cv-card[data-marked="true"] .ds-cv-card__pick .ds-list-check, [data-marking="true"] .ds-cv-card__pick .ds-list-check { opacity: 1; } .ds-cv-card__id { font-size: var(--text-xs); color: var(--faint); font-variant-numeric: tabular-nums; flex: none; } .ds-cv-card__title { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-cv-card[data-unread="true"] .ds-cv-card__title { font-weight: 700; } .ds-cv-card__time { font-size: 11.5px; color: var(--faint); flex: none; font-variant-numeric: tabular-nums; } .ds-cv-card[data-unread="true"] .ds-cv-card__time { color: var(--accent-text); font-weight: 600; } .ds-cv-card__actions { position: absolute; top: 7px; right: 10px; display: flex; gap: 2px; opacity: 0; pointer-events: none; transition: opacity .15s ease; } .ds-cv-card:hover .ds-cv-card__actions { opacity: 1; pointer-events: auto; } .ds-cv-card:hover .ds-cv-card__time { visibility: hidden; } .ds-cv-card__actions button { width: 26px; height: 26px; border: 0; border-radius: var(--radius-sm); background: var(--menu); color: var(--text-2); display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.35); } [data-theme="light"] .ds-cv-card__actions button { box-shadow: 0 1px 3px rgba(0,0,0,.12); } .ds-co-avatar { width: 16px; height: 16px; flex: none; border-radius: var(--radius-xs); display: grid; place-items: center; font-size: 7.5px; font-weight: 800; letter-spacing: -.02em; background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--c); } [data-theme="light"] .ds-co-avatar { color: var(--text); } .ds-cv-card__who { flex: 1; min-width: 0; font-size: var(--text-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-agent { width: 18px; height: 18px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 8px; font-weight: 800; color: #FFFFFF; background: var(--c); } .ds-agent--me { box-shadow: 0 0 0 2px rgba(140,114,219,.55); } .ds-agent--none { background: transparent; border: 1.5px dashed var(--dashed); color: var(--muted); } .ds-cv-card__preview { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-cv-card[data-unread="true"] .ds-cv-card__preview { color: var(--text); } .ds-cv-card__preview b { font-weight: 400; color: var(--muted); } .ds-cv-card__preview i { opacity: .7; } .ds-wait { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px; border-radius: var(--radius-tiny); font-size: 10.5px; font-weight: 700; white-space: nowrap; flex: none; font-variant-numeric: tabular-nums; } .ds-wait svg { width: 10px; height: 10px; } .ds-wait--orange { background: rgba(219,134,72,.16); color: #EBA676; } .ds-wait--red { background: rgba(224,108,117,.16); color: #F09AA1; } .ds-wait--green { background: rgba(143,216,106,.16); color: #A8E48A; } [data-theme="light"] .ds-wait--orange { background: rgba(219,134,72,.14); color: #82400E; } [data-theme="light"] .ds-wait--red { background: rgba(224,108,117,.14); color: #952B37; } [data-theme="light"] .ds-wait--green { background: rgba(143,216,106,.14); color: #2F6416; } .ds-bulk-bar { display: flex; align-items: center; gap: 2px; padding: 5px 4px 5px 12px; border-radius: var(--radius-lg); background: var(--bulk-bar-bg); color: var(--bulk-bar-fg); box-shadow: var(--shadow-menu); animation: ds-bulk-in .32s cubic-bezier(.2,.9,.25,1.12) both; } @keyframes ds-bulk-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .ds-bulk-bar__count { margin-right: auto; font-size: var(--text-xs); font-weight: 700; white-space: nowrap; } .ds-bulk-bar button { height: 28px; padding: 0 9px; border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; font-size: var(--text-xs); font-weight: 600; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; } .ds-bulk-bar button:hover { background: color-mix(in srgb, currentColor 10%, transparent); } .ds-conv-state { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--radius-pill); font-size: var(--text-2xs); font-weight: 700; white-space: nowrap; flex: none; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--text); } [data-theme="light"] .ds-conv-state { background: color-mix(in srgb, var(--c) 12%, transparent); } .ds-conv-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex: none; } .ds-chat-frame { container-type: inline-size; } .ds-chat-head { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--line); min-width: 0; } .ds-chat-head__title { min-width: 0; flex: 0 1 auto; font-size: var(--text-body); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-chat-head__who { min-width: 0; flex: 0 2 auto; font-size: var(--text-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-chat-head .ds-spacer { flex: 1; } @container (max-width: 599px) { .ds-chat-head .ds-conv-state { width: 22px; height: 22px; padding: 0; justify-content: center; font-size: 0; } } @container (max-width: 519px) { .ds-chat-head__who { display: none; } } /* ação com rótulo no cabeçalho (Inbox: Virar task, Resolver): abaixo de 560px fica só o ícone (30px), com o data-tip que já tem */ @container (max-width: 559px) { .ds-chat-head .ds-chat-head__act { width: 30px; padding: 0; justify-content: center; } .ds-chat-head .ds-chat-head__act-l { display: none; } } .ds-chat-body { display: flex; flex-direction: column; gap: 10px; padding: 16px; } .ds-chat-body[data-swap="true"] { animation: ds-chat-swap var(--duration-chat-swap) cubic-bezier(.2,.9,.25,1); } .ds-msg { display: flex; align-items: flex-end; gap: 8px; } .ds-msg--right { flex-direction: row-reverse; } .ds-msg__col { display: flex; flex-direction: column; gap: 3px; max-width: 78%; min-width: 0; } .ds-msg--right .ds-msg__col { align-items: flex-end; } .ds-msg__name { font-size: var(--text-2xs); font-weight: 700; color: var(--muted); } .ds-msg__meta { font-size: var(--text-2xs); color: var(--muted); } .ds-msg__meta--read { color: #72A2DA; } .ds-msg__avatar { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; background: var(--accent-16); color: var(--accent-text); } .ds-msg__avatar--client { border-radius: var(--radius-sm); background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--c); } [data-theme="light"] .ds-msg__avatar--client { color: var(--text); } .ds-bubble { padding: 9px 12px; font-size: var(--text-sm); line-height: 1.5; border-radius: 14px 14px 14px 4px; background: var(--surface); border: 1px solid var(--border); color: var(--text); overflow-wrap: anywhere; transition: background .15s ease, box-shadow .2s ease; } .ds-bubble:hover { background: var(--hover); } .ds-bubble--team { border-radius: 14px 14px 4px 14px; background: var(--accent-16); border-color: var(--accent-30); } .ds-bubble--team:hover { background: rgba(140,114,219,.22); } [data-theme="light"] .ds-bubble--team { background: rgba(140,114,219,.1); } [data-theme="light"] .ds-bubble--team:hover { background: var(--accent-16); } .ds-bubble--removed { background: transparent; border-style: dashed; color: var(--muted); font-style: italic; } .ds-bubble[data-current-hit="true"] { box-shadow: 0 0 0 2px rgba(226,194,91,.7); } .ds-note { align-self: center; width: 88%; display: flex; flex-direction: column; gap: 4px; padding: 9px 12px; border-radius: var(--radius-lg); border: 1px dashed var(--note-border); background: var(--note-bg); font-size: var(--text-sm); line-height: 1.5; } .ds-note__label { display: flex; align-items: center; gap: 5px; font-size: var(--text-2xs); font-weight: 700; color: var(--note-fg); } .ds-mention { padding: 1px 5px; border-radius: var(--radius-tiny); font-weight: 600; color: var(--accent-text); background: var(--accent-16); } .ds-mention--me { background: rgba(140,114,219,.26); } .ds-hit { background: rgba(226,194,91,.4); color: inherit; border-radius: 3px; padding: 0 1px; } .ds-hit--current { background: #E2C25B; color: #1B1B1B; } .ds-chat-search { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); } .ds-chat-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text); font-size: var(--text-sm); } .ds-chat-search__count { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .ds-fix-box { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--radius-xl); background: var(--menu); border: 1px solid var(--border); box-shadow: var(--shadow-menu); max-height: 60vh; overflow: auto; scrollbar-width: none; } .ds-fix-box__label { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .ds-fix-box__before { padding: 9px 11px; border-radius: var(--radius-md); background: var(--hover); font-size: var(--text-sm); line-height: 1.5; color: var(--text-2); } .ds-fix-box__after { padding: 9px 11px; border-radius: var(--radius-md); background: rgba(140,114,219,.1); border: 1px solid rgba(140,114,219,.35); font-size: var(--text-sm); line-height: 1.5; } [data-theme="light"] .ds-fix-box__after { background: var(--accent-08); } .ds-fix-mark { background: rgba(140,114,219,.28); color: inherit; border-radius: 4px; padding: 0 2px; font-weight: 600; } [data-theme="light"] .ds-fix-mark { background: rgba(140,114,219,.22); } .ds-btn--30 { height: 30px; padding: 0 12px; border-radius: var(--radius-item); font-size: var(--text-xs); font-weight: 600; } .ds-return-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 3px 0 10px; border-radius: var(--radius-pill); background: var(--accent-16); color: var(--accent-text); font-size: 11.5px; font-weight: 600; white-space: nowrap; animation: ds-kx-pop .32s var(--ease-overshoot); } [data-theme="light"] .ds-return-chip { background: rgba(140,114,219,.1); } .ds-return-chip svg { width: 12px; height: 12px; } .ds-return-chip button { width: 18px; height: 18px; border: 0; border-radius: 50%; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; opacity: .75; } .ds-return-chip button:hover { opacity: 1; background: var(--accent-20); } .ds-summary { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--radius-xl); background: rgba(140,114,219,.1); border: 1px solid var(--accent-30); } [data-theme="light"] .ds-summary { background: rgba(140,114,219,.06); } .ds-summary__label { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); } .ds-summary__line { font-size: 12.5px; line-height: 1.45; animation: ds-kx-in .3s var(--ease) both; } .ds-mode-seg { position: relative; display: inline-flex; padding: 3px; border-radius: var(--radius-md); background: var(--hover); } .ds-mode-seg__thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: 104px; border-radius: var(--radius-sm); background: var(--menu); box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .32s cubic-bezier(.2,.9,.25,1.12), width .32s cubic-bezier(.2,.9,.25,1.12), background-color .25s ease; } .ds-mode-seg[data-mode="note"] .ds-mode-seg__thumb { transform: translateX(104px); width: 92px; background: rgba(226,194,91,.22); } [data-theme="light"] .ds-mode-seg[data-mode="note"] .ds-mode-seg__thumb { background: rgba(226,194,91,.4); } .ds-mode-seg__btn { position: relative; z-index: 1; height: 26px; border: 0; background: transparent; color: var(--muted); font-size: var(--text-xs); font-weight: 600; cursor: pointer; transition: color .25s ease; white-space: nowrap; } .ds-mode-seg__btn:nth-of-type(1) { width: 104px; } .ds-mode-seg__btn:nth-of-type(2) { width: 92px; } .ds-mode-seg__btn[aria-checked="true"] { color: var(--text); } .ds-mode-seg[data-mode="note"] .ds-mode-seg__btn[aria-checked="true"] { color: var(--note-fg); } .ds-composer { display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 6px 12px; border-radius: var(--radius-xl); background: var(--input-bg); border: 1px solid var(--border); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } .ds-composer[data-draft="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-12); } .ds-composer[data-note="true"] { border-color: rgba(226,194,91,.55); background: rgba(226,194,91,.07); box-shadow: none; } [data-theme="light"] .ds-composer[data-note="true"] { background: rgba(226,194,91,.12); } .ds-composer textarea { width: 100%; min-height: 22px; max-height: 160px; resize: none; border: 0; outline: none; background: transparent; color: var(--text); font-size: var(--text-sm); line-height: 1.5; } .ds-composer__tools { display: flex; align-items: center; gap: 2px; } .ds-composer__tools .ds-spacer { flex: 1; } .ds-composer__tool { width: 30px; height: 30px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; } .ds-composer__tool:hover { background: var(--hover); color: var(--text); } .ds-composer__send { height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius-md); background: var(--primary); color: #FFFFFF; font-size: var(--text-xs); font-weight: 700; cursor: pointer; transition: background .25s ease; white-space: nowrap; } .ds-composer__send:disabled { background: var(--hover); color: var(--muted); cursor: default; } .ds-composer[data-note="true"] .ds-composer__send { background: #C29A2A; color: #FFFFFF; } .ds-ctx-sec { border-bottom: 1px solid var(--line); } .ds-ctx-sec__head { display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 6px 0 4px; border: 0; background: transparent; color: var(--text); font-size: var(--text-sm); font-weight: 600; cursor: pointer; } .ds-ctx-sec__head svg { color: var(--muted); transition: transform .3s var(--ease); } .ds-ctx-sec__head[aria-expanded="false"] svg { transform: rotate(-90deg); } .ds-ctx-sec__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .32s var(--ease), opacity .25s ease; } .ds-ctx-sec__body > div { overflow: hidden; min-height: 0; padding-bottom: 6px; } .ds-ctx-sec__body[data-open="false"] { grid-template-rows: 0fr; opacity: 0; } .ds-kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 32px; padding: 0 6px; border-radius: var(--radius-item); font-size: var(--text-xs); } .ds-kv__k { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-kv__v { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-kv__v--warn { color: var(--tone-orange-fg); } /* ---------- Task (sheet): trilho, painel, atividades, propostas, lembrete ---------- */ .ds-sheet-rail { width: var(--sheet-rail-width); flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0; background: var(--sheet-rail); border-left: 1px solid var(--line); } .ds-rail-btn { position: relative; width: 44px; height: 48px; border: 0; border-radius: var(--radius-lg); background: transparent; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; transition: background .2s ease, color .2s ease; } .ds-rail-btn:hover { background: var(--hover); color: var(--text); } .ds-rail-btn__count { font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; } .ds-rail-btn__count--red { min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--unread-bg); color: #FFFFFF; display: grid; place-items: center; } .ds-rail-btn::after { content: ""; position: absolute; right: -8px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--accent); transform: scaleY(0); transition: transform .4s var(--ease-bounce); } .ds-rail-btn[aria-pressed="true"] { background: var(--accent-16); color: var(--accent-text); } .ds-rail-btn[aria-pressed="true"]::after { transform: scaleY(1); } .ds-rail-btn__pin { position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .ds-panel-head { display: flex; align-items: center; gap: 10px; padding: 16px 12px 14px 18px; border-bottom: 1px solid var(--line); } .ds-panel-head__icon { width: 34px; height: 34px; flex: none; border-radius: var(--radius-md); background: var(--accent-16); color: var(--accent-text); display: grid; place-items: center; } .ds-panel-head__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; } .ds-panel-head__title { font-size: var(--text-title); font-weight: 600; } .ds-panel-head__sub { font-size: var(--text-xs); color: var(--muted); } .ds-pin-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: transparent; color: var(--text-2); font-size: var(--text-xs); font-weight: 600; cursor: pointer; white-space: nowrap; } .ds-pin-pill[aria-pressed="true"] { background: var(--accent-16); border-color: rgba(140,114,219,.5); color: var(--accent-text); } [data-theme="light"] .ds-pin-pill[aria-pressed="true"] { background: rgba(140,114,219,.1); } .ds-panel-empty { padding: 28px 16px; border-radius: var(--radius-xl); border: 1px dashed var(--dashed); text-align: center; font-size: var(--text-xs); color: var(--muted); } .ds-activity { position: relative; display: flex; flex-direction: column; gap: 2px; } .ds-activity::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: var(--line); } .ds-activity__row { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 6px 8px; border-radius: var(--radius-lg); } .ds-activity__icon { width: 28px; height: 28px; flex: none; border-radius: var(--radius-item); display: grid; place-items: center; background: color-mix(in srgb, var(--c) 18%, var(--sheet)); color: var(--c); box-shadow: 0 0 0 4px var(--sheet); } [data-theme="light"] .ds-activity__icon { background: color-mix(in srgb, var(--c) 14%, var(--sheet)); color: var(--text); } .ds-activity__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 4px; font-size: var(--text-xs); color: var(--text-2); } .ds-activity__line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .ds-activity__time { font-size: var(--text-2xs); color: var(--muted); } .ds-change-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--radius-thumb); font-size: var(--text-2xs); font-weight: 600; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--text); } [data-theme="light"] .ds-change-chip { background: color-mix(in srgb, var(--c) 13%, transparent); } .ds-change-chip--from { opacity: .75; text-decoration: line-through; } .ds-mini-avatar { width: 18px; height: 18px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; font-size: 8px; font-weight: 700; background: var(--accent-16); color: var(--accent-text); } .ds-status-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 700; white-space: nowrap; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--text); } [data-theme="light"] .ds-status-pill { background: color-mix(in srgb, var(--c) 13%, transparent); } .ds-proposal { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--line); } .ds-proposal--draft { background: transparent; border-style: dashed; border-color: var(--dashed); } .ds-proposal--cancelled { opacity: .7; } .ds-proposal--cancelled .ds-proposal__title { text-decoration: line-through; } .ds-proposal__top { display: flex; align-items: flex-start; gap: 10px; } .ds-proposal__code { font-size: var(--text-2xs); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; } .ds-proposal__title { font-size: var(--text-body); font-weight: 700; } .ds-proposal__total { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; } .ds-proposal__valid { font-size: var(--text-2xs); font-weight: 700; color: var(--muted); } .ds-proposal__valid--warn { color: var(--tone-orange-fg); } .ds-proposal__steps { display: flex; align-items: center; } .ds-proposal__step { display: flex; align-items: center; gap: 6px; flex: 1; font-size: 10px; color: var(--muted); } .ds-proposal__step:last-child { flex: none; } .ds-proposal__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--border); } .ds-proposal__line { flex: 1; height: 2px; margin-right: 6px; background: var(--border); } .ds-proposal__step[data-done="true"] .ds-proposal__dot, .ds-proposal__step[data-done="true"] .ds-proposal__line { background: var(--c, var(--accent)); } .ds-proposal__step[data-current="true"] .ds-proposal__dot { background: var(--c, var(--accent)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, var(--accent)) 18%, transparent); } .ds-proposal__actions { display: flex; flex-wrap: wrap; gap: 6px; } .ds-reminder-box { width: 360px; max-width: 100%; display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: var(--radius-2xl); background: var(--dialog); border: 1px solid rgba(226,194,91,.45); box-shadow: var(--shadow-menu); animation: ds-reminder-in .38s cubic-bezier(.2,.9,.25,1.12) both; } @keyframes ds-reminder-in { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } } .ds-reminder-box__top { display: flex; gap: 10px; align-items: flex-start; } .ds-reminder-box__icon { width: 32px; height: 32px; flex: none; border-radius: var(--radius-md); background: var(--reminder-bg); color: var(--reminder-fg); display: grid; place-items: center; animation: ds-kx-pop .45s var(--ease-overshoot) .12s both; } .ds-reminder-box__kicker { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--reminder-fg); } .ds-reminder-box__title { font-size: var(--text-body); font-weight: 700; } .ds-reminder-box__text { font-size: var(--text-xs); color: var(--text-2); line-height: 1.45; } .ds-reminder-box__ref { font-size: var(--text-2xs); color: var(--muted); } /* Segmentado com polegar do sheet (Data/Intervalo, Ata/Transcrição, Online/Presencial, Lista/Grade) */ .ds-sheet-seg { position: relative; display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); padding: 3px; border-radius: var(--radius-md); background: var(--hover); } .ds-sheet-seg__thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n, 2)); border-radius: var(--radius-sm); background: var(--menu); box-shadow: 0 1px 3px rgba(0,0,0,.3); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .32s cubic-bezier(.2,.9,.25,1.12); } [data-theme="light"] .ds-sheet-seg__thumb { box-shadow: 0 1px 3px rgba(0,0,0,.12); } .ds-sheet-seg__btn { position: relative; z-index: 1; height: 28px; padding: 0 12px; border: 0; background: transparent; color: var(--muted); font-size: var(--text-xs); font-weight: 600; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .ds-sheet-seg__btn[aria-selected="true"] { color: var(--text); } .ds-sheet-seg--proposal { border-radius: var(--radius-btn-38); } .ds-sheet-seg--proposal .ds-sheet-seg__thumb { border-radius: var(--radius-item); } /* ---------- Telas de configuração: padrões comuns ---------- */ .ds-btn--38 { height: 38px; padding: 0 16px; border-radius: var(--radius-btn-38); } .ds-seg-lg { position: relative; display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); padding: 4px; border-radius: var(--radius-xl); background: var(--input-bg); border: 1px solid var(--border); } .ds-seg-lg__thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n, 2)); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.35); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .38s cubic-bezier(.2,.9,.25,1.1); } [data-theme="light"] .ds-seg-lg__thumb { box-shadow: 0 1px 3px rgba(0,0,0,.12); } .ds-seg-lg__btn { position: relative; z-index: 1; height: 40px; border: 0; background: transparent; color: var(--muted); font-size: var(--text-sm); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .ds-seg-lg__btn[aria-selected="true"] { color: var(--text); } .ds-seg-mini { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-md); background: var(--input-bg); } .ds-seg-mini__btn { height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); font-size: var(--text-xs); font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .2s ease, color .2s ease, box-shadow .2s ease; } .ds-seg-mini__btn[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.2), inset 0 0 0 1px rgba(140,114,219,.35); } .ds-switch--mini .ds-switch__track { width: 30px; height: 18px; } .ds-switch--mini .ds-switch__knob { width: 14px; height: 14px; transition: transform .3s cubic-bezier(.2,.9,.25,1.25); } .ds-switch--mini[aria-checked="true"] .ds-switch__knob { transform: translateX(12px); } .ds-switch--lg .ds-switch__track { width: 38px; height: 22px; } .ds-switch--lg .ds-switch__knob { width: 18px; height: 18px; } .ds-switch--lg[aria-checked="true"] .ds-switch__knob { transform: translateX(16px); } .ds-switch--xl .ds-switch__track { width: 40px; height: 24px; padding: 3px; } .ds-switch--xl .ds-switch__knob { width: 18px; height: 18px; } .ds-switch--xl[aria-checked="true"] .ds-switch__knob { transform: translateX(16px); } .ds-chip-check { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 9px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: transparent; color: var(--text-2); font-size: var(--text-xs); cursor: pointer; white-space: nowrap; transition: background .15s ease, border-color .15s ease; } .ds-chip-check .ds-check { pointer-events: none; } .ds-chip-check[aria-checked="true"] { border-color: rgba(140,114,219,.5); background: rgba(140,114,219,.12); color: var(--text); } [data-theme="light"] .ds-chip-check[aria-checked="true"] { background: rgba(140,114,219,.07); } .ds-stepper { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: var(--radius-lg); background: var(--input-bg); border: 1px solid var(--border); } .ds-stepper button { width: 34px; height: 34px; border: 0; border-radius: var(--radius-item); background: transparent; color: var(--text-2); font-size: 16px; cursor: pointer; display: grid; place-items: center; } .ds-stepper button:hover { background: var(--hover); color: var(--text); } .ds-stepper__value { min-width: 36px; text-align: center; font-size: var(--text-title); font-weight: 600; font-variant-numeric: tabular-nums; } .ds-stepper__value[data-bump="true"] { animation: ds-bump .3s var(--ease-overshoot); } @keyframes ds-bump { 40% { transform: scale(1.3); } } .ds-stepper--inline { padding: 0; border: 0; background: transparent; } .ds-stepper--inline button { width: 24px; height: 24px; border-radius: var(--radius-thumb); background: var(--hover); font-size: 13px; } .ds-stepper--inline .ds-stepper__value { min-width: 24px; font-size: var(--text-xs); font-weight: 700; } .ds-sentence { padding: 12px 14px; border-radius: var(--radius-lg); background: rgba(140,114,219,.1); border: 1px solid var(--accent-30); font-size: var(--text-sm); line-height: 1.5; } [data-theme="light"] .ds-sentence { background: rgba(140,114,219,.06); } .ds-sentence[data-pulse="true"] { animation: ds-ring-flash .9s var(--ease-glow); } .ds-sticky-preview { position: sticky; top: -20px; z-index: 2; box-shadow: 0 0 0 8px var(--dialog); background: var(--dialog); border-radius: var(--radius-xl); } .ds-save-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .ds-save-foot__status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--muted); margin-right: auto; } .ds-save-foot__status .ds-status-dot { flex: none; } .ds-entity-row { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 8px; border-radius: var(--radius-xl); background: var(--input-bg); } .ds-entity-row .ds-grip { width: 20px; height: 28px; } .ds-entity-row__meta { margin-left: auto; font-size: var(--text-xs); color: var(--muted); white-space: nowrap; } .ds-new-row { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 6px 0 8px; border-radius: var(--radius-lg); border: 1px dashed var(--dashed); } .ds-new-row input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--text); font-size: var(--text-sm); } .ds-danger-zone { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--radius-xl); border: 1px solid rgba(224,108,117,.35); } .ds-trigger-sm { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--text-2); font-size: var(--text-xs); font-weight: 600; cursor: pointer; white-space: nowrap; } .ds-trigger-sm[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-18); } .ds-combo-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-size: var(--text-sm); cursor: pointer; min-width: 200px; } .ds-combo-btn .ds-chevron { margin-left: auto; } .ds-combo-btn[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-18); } .ds-micro-badge { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--hover); color: var(--muted); } .ds-sample-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); transition: padding .3s var(--ease); } .ds-sample-card[data-compact="true"] { padding: 12px; } /* ---------- Movimento reduzido ---------- */ @media (prefers-reduced-motion: reduce) { .ds-root *, .ds-root *::before, .ds-root *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 120ms !important; transition-delay: 0ms !important; } } /* ---------- Conversas: Iniciar conversa, rascunho e faixa “fora da lista” (1.3) ---------- */ .ds-cv-new-btn { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; padding: 0; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text-2); transition: background .2s ease, border-color .2s ease, color .2s ease; } .ds-cv-new-btn svg { transition: transform .3s cubic-bezier(.2,.9,.25,1.2); } .ds-cv-new-btn[aria-expanded="true"] { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); } [data-theme="light"] .ds-cv-new-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 10%, transparent); } .ds-cv-new-btn[aria-expanded="true"] svg { transform: rotate(45deg); } .ds-cv-new { width: 384px; max-width: 100%; box-sizing: border-box; padding: 6px; border-radius: 16px; background: var(--menu); border: 1px solid var(--border); box-shadow: var(--shadow-menu); display: flex; flex-direction: column; color: var(--text); } .ds-cv-new__head { display: flex; align-items: center; gap: 8px; padding: 6px 6px 8px 8px; } .ds-cv-new__title { flex: 1; font-size: 14px; font-weight: 700; letter-spacing: -.01em; } .ds-cv-new__sort { position: relative; display: inline-grid; grid-template-columns: 70px 44px; padding: 2px; border-radius: 9px; border: 1px solid var(--border); } .ds-cv-new__sort-thumb { position: absolute; top: 2px; bottom: 2px; left: 2px; width: 70px; border-radius: 7px; background: var(--hover); transition: transform .3s cubic-bezier(.2,.9,.25,1.12), width .3s cubic-bezier(.2,.9,.25,1.12); } .ds-cv-new__sort[data-i="1"] .ds-cv-new__sort-thumb { width: 44px; transform: translateX(70px); } .ds-cv-new__sort button { font: inherit; position: relative; height: 22px; border: 0; padding: 0; background: transparent; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; transition: color .2s ease; } .ds-cv-new__sort button[aria-checked="true"] { color: var(--text); } .ds-cv-new__search { display: flex; align-items: center; gap: 8px; height: 36px; flex: none; margin: 0 2px 6px; padding: 0 10px; border-radius: 10px; background: var(--hover); } .ds-cv-new__search input { font: inherit; flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text); font-size: 13px; } .ds-cv-new__fx { display: flex; align-items: center; gap: 6px; margin: -2px 4px 6px; padding: 0 6px; font-size: 11.5px; color: var(--muted); } .ds-cv-new__list { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; display: flex; flex-direction: column; gap: 1px; } .ds-cv-new__row { font: inherit; display: flex; flex-direction: column; gap: 3px; width: 100%; box-sizing: border-box; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); text-align: left; cursor: pointer; animation: ds-item-in .28s cubic-bezier(.2,.85,.25,1) both; } .ds-cv-new__l1 { display: flex; align-items: center; gap: 7px; min-width: 0; } .ds-cv-new__id { flex: none; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; } .ds-cv-new__name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-cv-new__has { flex: none; height: 18px; padding: 0 6px; border-radius: 6px; display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; background: var(--hover); color: var(--text-2); } .ds-cv-new__l2 { display: flex; align-items: center; gap: 6px; padding-left: 17px; min-width: 0; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-cv-new__group { display: block; padding: 10px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); } .ds-cv-new__more { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 0 6px; font-size: 11.5px; color: var(--faint); } .ds-cv-new__foot { margin-top: 6px; padding-top: 4px; border-top: 1px solid var(--line); display: flex; flex-direction: column; } .ds-cv-new__foot > button { font: inherit; display: flex; align-items: center; gap: 7px; width: 100%; min-height: 32px; padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; text-align: left; } .ds-cv-new__foot > button b { font-weight: 600; color: var(--text-2); } .ds-cv-new__foot > button svg:last-child { transition: transform .3s cubic-bezier(.2,.85,.25,1); opacity: .6; } .ds-cv-new__foot[data-open="true"] > button svg:last-child { transform: rotate(180deg); } .ds-cv-new__why { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.2,.85,.25,1); } .ds-cv-new__foot[data-open="true"] .ds-cv-new__why { grid-template-rows: 1fr; } .ds-cv-new__why > div { min-height: 0; overflow: hidden; } .ds-cv-new__why p { margin: 0; padding: 2px 8px 8px 28px; font-size: 12px; line-height: 1.5; color: var(--text-2); } .ds-cv-draft { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 9px 12px 9px 14px; border-radius: 12px; cursor: pointer; border: 1.5px dashed color-mix(in srgb, var(--accent) 75%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); } [data-theme="light"] .ds-cv-draft { background: color-mix(in srgb, var(--accent) 8%, transparent); } .ds-cv-draft__tag { flex: none; height: 18px; padding: 0 7px; border-radius: 6px; display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-text); } .ds-cv-draft__hint { padding-left: 17px; font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-cv-out { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 10px; border-radius: 10px; background: var(--hover); font-size: 12px; color: var(--text-2); animation: ds-item-in .3s cubic-bezier(.2,.85,.25,1) both; } .ds-cv-out button { font: inherit; flex: none; height: 24px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; } /* ---------- Respostas rápidas (Modelos) e só leitura em Conversas (1.3) ---------- */ .ds-reply-list { display: flex; flex-direction: column; gap: 1px; padding: 4px; border-radius: 14px; border: 1px solid var(--line); } .ds-reply { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px 11px 8px; border-radius: 12px; cursor: pointer; transition: opacity .15s ease; } .ds-reply[data-dragging="true"] { opacity: .45; } .ds-reply[data-over="before"] { box-shadow: inset 0 2px 0 var(--accent); } .ds-reply[data-over="after"] { box-shadow: inset 0 -2px 0 var(--accent); } .ds-reply__grip { flex: none; align-self: center; width: 14px; display: grid; place-items: center; color: var(--muted); opacity: .55; cursor: grab; } .ds-reply__name { font-size: 14px; font-weight: 600; } .ds-reply__prev { font-size: 12px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ds-reply__used { flex: none; align-self: center; font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; } .ds-kbd-mono { flex: none; font-size: 11px; font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; padding: 1px 6px; border-radius: 6px; background: var(--hover); color: var(--text-2); } .ds-var-chip { display: inline-block; padding: 0 5px; margin: 0 1px; border-radius: 5px; font-size: 11px; font-weight: 700; line-height: 17px; background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-text); } [data-theme="light"] .ds-var-chip { background: color-mix(in srgb, var(--accent) 12%, transparent); } .ds-shortcut { display: flex; align-items: center; height: 38px; box-sizing: border-box; padding: 0 12px 0 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--input-bg); transition: border-color .2s ease; } .ds-shortcut[data-error="true"] { border-color: var(--tone-red-dot); } .ds-shortcut > span { flex: none; font-size: 14px; font-weight: 700; color: var(--muted); margin-right: 2px; } .ds-shortcut input { font: inherit; flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--text); font-size: 13px; font-weight: 600; padding: 0; } .ds-reply-prev { min-height: 44px; box-sizing: border-box; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: color-mix(in srgb, var(--accent) 16%, transparent); font-size: 13px; line-height: 1.55; white-space: pre-wrap; } [data-theme="light"] .ds-reply-prev { background: color-mix(in srgb, var(--accent) 9%, transparent); } .ds-reply-prev b { color: var(--accent-text); font-weight: 600; } .ds-reply-prev em { font-style: normal; color: var(--tone-red-fg); font-weight: 700; } .ds-ro-note { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; background: var(--hover); font-size: 11.5px; color: var(--text-2); } /* ---------- Campos personalizados e templates de subtasks (1.4) ---------- */ .ds-field-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 8px; border-radius: 12px; cursor: pointer; } .ds-field-row__icon { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-text); } [data-theme="light"] .ds-field-row__icon { background: color-mix(in srgb, var(--accent) 9%, transparent); } .ds-field-row__name { font-size: 14px; font-weight: 600; } .ds-field-row__type { font-size: 12px; color: var(--muted); } .ds-seal-sm { flex: none; font-size: 9px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 1px 5px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-text); } .ds-seal-sm--green { background: color-mix(in srgb, var(--tone-green-dot) 14%, transparent); color: var(--tone-green-fg); } .ds-fill { flex: none; display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; } .ds-fill > span { width: 44px; height: 5px; border-radius: 999px; background: var(--hover); overflow: hidden; display: block; } .ds-fill > span > i { display: block; height: 100%; border-radius: 999px; background: var(--accent); } .ds-fill[data-full="true"] > span > i { background: var(--tone-green-dot); } .ds-opt-row { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 6px 0 8px; border-radius: 9px; font-size: 13px; } .ds-opt-swatch { width: 26px; height: 26px; flex: none; border-radius: 8px; border: 1px solid var(--border); display: grid; place-items: center; background: transparent; cursor: pointer; padding: 0; } .ds-opt-swatch > i { width: 12px; height: 12px; border-radius: 50%; display: block; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); } .ds-opt-swatch[data-none="true"] > i { background: repeating-linear-gradient(135deg, var(--hover) 0 3px, var(--border) 3px 6px); box-shadow: none; } .ds-field-prev { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--dashed); background: var(--input-bg); } .ds-tpl-chip { font: inherit; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; border: 1px solid var(--border); background: var(--hover); color: var(--text-2); cursor: pointer; } .ds-tpl-chip[data-empty="true"] { border-style: dashed; background: transparent; color: var(--muted); } .ds-tpl-chip button { font: inherit; width: 20px; height: 20px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); cursor: pointer; padding: 0; font-size: 13px; font-weight: 600; } /* Nova task (1.5): selo de origem no chip, chip-campo e aviso de possível duplicada */ @keyframes ds-seal-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } } .ds-prop { font: inherit; display: inline-flex; align-items: center; gap: 7px; height: 36px; box-sizing: border-box; padding: 0 12px 0 10px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text-2); font-size: 13px; white-space: nowrap; } .ds-prop[data-filled="true"] { background: var(--hover); color: var(--text); font-weight: 500; } .ds-seal { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; flex: none; background: var(--kbd); color: var(--muted); animation: ds-seal-in .38s cubic-bezier(.2,.9,.25,1.2) both; } .ds-seal--client { background: var(--accent-18); color: var(--accent-text); } [data-theme="light"] .ds-seal--client { background: var(--accent-12); } .ds-chip-field { display: inline-flex; align-items: center; gap: 7px; height: 36px; box-sizing: border-box; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: text; flex: none; } .ds-chip-field input { font: inherit; font-size: 13px; color: var(--text); background: transparent; border: 0; outline: none; padding: 0; height: 34px; width: 84px; flex: none; text-transform: uppercase; letter-spacing: .03em; } .ds-callout--dup { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border-radius: 12px; background: var(--tone-orange-bg); border: 1px solid color-mix(in srgb, var(--tone-orange-dot) 35%, transparent); } .ds-callout--dup > i, .ds-callout--dup > svg { flex: none; color: var(--tone-orange-fg); } .ds-callout--dup .ds-callout__body { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; } .ds-callout--dup .ds-callout__body b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-callout--dup .ds-callout__body span { font-size: 12px; color: var(--muted); } /* Nova task (1.13): obrigatório vazio, chip em erro, segmentado de 3 e linha da aba Nova task em Dados do quadro */ .ds-req-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--accent); transition: background .2s ease; } .ds-prop[data-bad="true"], .ds-chip-field[data-bad="true"] { border-color: var(--tone-red-dot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone-red-dot) 16%, transparent); } [data-bad="true"] .ds-req-dot { background: var(--tone-red-dot); } .ds-seal--req { background: var(--tone-orange-bg); color: var(--tone-orange-fg); font-size: 9px; height: 16px; padding: 0 5px; border-radius: 999px; } .ds-nt-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--field); border: 1px solid var(--border); } .ds-nt-row[data-req="true"] { border-color: var(--accent-40); } .ds-nt-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; } .ds-nt-row__body b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-nt-row__body span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-seg3 { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, 1fr); flex: none; width: 234px; padding: 3px; box-sizing: border-box; border-radius: 10px; background: var(--hover); } .ds-seg3__thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 8px; background: var(--dialog); box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform .34s cubic-bezier(.2,.9,.25,1.12), background .25s ease, box-shadow .25s ease; } [data-theme="light"] .ds-seg3__thumb { box-shadow: 0 1px 3px rgba(0,0,0,.12); } .ds-seg3[data-v="req"] .ds-seg3__thumb { background: var(--accent-22); box-shadow: inset 0 0 0 1px var(--accent-45); } [data-theme="light"] .ds-seg3[data-v="req"] .ds-seg3__thumb { background: var(--accent-14); } .ds-seg3 button { font: inherit; position: relative; z-index: 1; height: 28px; padding: 0 6px; border: 0; background: transparent; cursor: pointer; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--muted); transition: color .2s ease; } .ds-seg3 button[aria-checked="true"] { color: var(--text); } .ds-seg3[data-v="req"] button[aria-checked="true"] { color: var(--accent-text); } /* Prazo (1.18): contagem da regra relativa — segmentado pílula corridos | úteis + selo “do quadro” / “só aqui” (app/dias.js ruleSeg) */ .ds-dayseg { position: relative; isolation: isolate; display: inline-grid; grid-template-columns: 1fr 1fr; flex: none; width: 128px; height: 26px; padding: 2px; box-sizing: border-box; border-radius: 999px; background: var(--hover); } .ds-dayseg__thumb { position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px) / 2); border-radius: 999px; background: var(--menu); box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform .32s cubic-bezier(.2,.9,.25,1.12); } [data-theme="light"] .ds-dayseg__thumb { box-shadow: 0 1px 3px rgba(0,0,0,.12); } .ds-dayseg[data-v="uteis"] .ds-dayseg__thumb { transform: translateX(100%); } .ds-dayseg button { font: inherit; position: relative; z-index: 1; border: 0; padding: 0; background: transparent; cursor: pointer; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--muted); transition: color .2s ease; } .ds-dayseg button[aria-checked="true"] { color: var(--text); } .ds-dayseal { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; white-space: nowrap; color: var(--muted); background: var(--hover); transition: background .2s ease, color .2s ease; } .ds-dayseal--own { color: var(--accent-text); background: var(--accent-16); } [data-theme="light"] .ds-dayseal--own { background: var(--accent-12); } /* Rota de API (1.14): segredo que aparece uma vez, bloco de código e pílula de código de resposta */ .ds-reveal { display: flex; flex-direction: column; gap: 14px; width: 520px; max-width: 100%; box-sizing: border-box; padding: 22px; border-radius: 20px; background: var(--dialog); border: 1px solid var(--border); box-shadow: var(--shadow-dialog, 0 40px 90px rgba(0,0,0,.6)); } .ds-reveal__value { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 12px; background: var(--code); border: 1px solid var(--border); } .ds-reveal__value code { flex: 1; min-width: 0; font: 600 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; user-select: all; } .ds-reveal__warn { display: flex; gap: 8px; padding: 10px 12px; border-radius: 12px; font-size: 12px; line-height: 1.45; background: var(--tone-orange-bg); color: var(--tone-orange-fg); } .ds-code { margin: 0; padding: 12px 14px; border-radius: 12px; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-all; background: var(--code); color: var(--text-2); border: 1px solid var(--border); } .ds-http { flex: none; min-width: 58px; text-align: center; height: 22px; line-height: 22px; padding: 0 8px; border-radius: 999px; font: 700 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--tone-red-bg); color: var(--tone-red-fg); } .ds-http--ok { background: var(--tone-green-bg); color: var(--tone-green-fg); } .ds-http--wait { background: var(--tone-orange-bg); color: var(--tone-orange-fg); } /* Rota de API (1.16): cartão de número, hachura das recusadas no gráfico */ .ds-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--input-bg); border: 1px solid var(--border); min-width: 0; } .ds-stat__label { font-size: 11.5px; color: var(--muted); } .ds-stat__value { font-size: 22px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--text); } .ds-stat__sub { font-size: 11.5px; color: var(--muted); } .ds-hatch { background: repeating-linear-gradient(135deg, #E2C25B 0 3px, rgba(226,194,91,.5) 3px 6px); } [data-theme="light"] .ds-hatch { background: repeating-linear-gradient(135deg, #B88A1E 0 3px, rgba(184,138,30,.5) 3px 6px); } /* Editores (1.17): trilho das Automações, etapas dos Workflows e campo do builder de Formulários */ .ds-rule { display: flex; flex-direction: column; gap: 10px; } .ds-rule__row { display: grid; grid-template-columns: 66px 1fr; gap: 10px; align-items: start; position: relative; } .ds-rule__row:not(:last-child)::before { content: ""; position: absolute; left: 32px; top: 30px; bottom: -10px; width: 1px; background: var(--border); } .ds-rule__tag { min-width: 56px; height: 24px; display: inline-grid; place-items: center; border-radius: 7px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; position: relative; z-index: 1; } .ds-rule__tag--when { background: var(--tone-blue-bg); color: var(--tone-blue-fg); } .ds-rule__tag--if { background: var(--tone-orange-bg); color: var(--tone-orange-fg); } .ds-rule__tag--then { background: var(--tone-green-bg); color: var(--tone-green-fg); } .ds-rule__block { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); } .ds-rule__block b { font-size: 13px; font-weight: 600; } .ds-rule__num { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%; font-size: 11px; font-weight: 700; background: var(--tone-green-bg); color: var(--tone-green-fg); } .ds-rule__preview { padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; background: var(--accent-08); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); } /* 1.18 · Automações: painel da ação (Migrar / E-mail), mapa de colunas e variáveis do e-mail */ .ds-auto-panel { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: var(--input-bg); border: 1px solid var(--border); } .ds-auto-panel__label { width: 52px; flex: none; font-size: 12px; font-weight: 600; color: var(--text-2); } .ds-auto-map { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); } .ds-auto-map__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 38px; font-size: 13px; } .ds-auto-map__src { display: inline-flex; align-items: center; gap: 8px; width: 200px; flex: none; font-weight: 500; } .ds-auto-map__hint { font-size: 11.5px; color: var(--faint); } .ds-auto-dd { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 12px; border-radius: 10px; background: var(--input-bg); border: 1px solid var(--border); font-size: 13px; color: var(--text); min-width: 200px; box-sizing: border-box; } .ds-auto-dd--bad { border-color: var(--tone-red-dot); } .ds-auto-warn { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.45; color: var(--tone-orange-fg); } .ds-auto-notice { display: flex; align-items: flex-start; gap: 8px; padding: 9px 11px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; background: var(--tone-blue-bg); color: var(--tone-blue-fg); } .ds-auto-var { height: 24px; padding: 0 8px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--accent-text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .ds-auto-pv { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); } .ds-auto-pv__body { font-size: 13px; line-height: 1.55; color: var(--text-2); white-space: pre-wrap; } /* 1.18 · ligações: painel da ação Enviar para outra empresa */ .ds-auto-co { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ds-auto-co__mark { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; background: rgba(140,114,219,.18); color: var(--accent-text); } [data-theme="light"] .ds-auto-co__mark { background: rgba(140,114,219,.12); } .ds-auto-co__msg { font-size: 12.5px; line-height: 1.45; color: var(--text-2); padding: 2px 0 2px 10px; border-left: 2px solid var(--border); white-space: pre-wrap; } .ds-wf { display: flex; flex-direction: column; } .ds-wf__step { display: grid; grid-template-columns: 24px 1fr; gap: 12px; position: relative; padding-bottom: 12px; } .ds-wf__step:not(.ds-wf__step--last)::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: linear-gradient(var(--c1), var(--c2)); } .ds-wf__node { width: 24px; height: 24px; box-sizing: border-box; border-radius: 50%; background: var(--c1); border: 3px solid var(--dialog); box-shadow: 0 0 0 2px var(--c1); } .ds-wf__box { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); } .ds-wf__box b { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; } .ds-wf__num { width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 700; background: var(--accent-18); color: var(--accent-text); } .ds-fb-field { font: inherit; display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 10px 12px 10px 6px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; } .ds-fb-field[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-18); } .ds-fb-field__grip { width: 20px; flex: none; display: grid; place-items: center; color: var(--muted); opacity: .7; } .ds-fb-field__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ds-fb-field__body b { font-size: 13px; font-weight: 600; } .ds-fb-field__req { color: var(--tone-red-fg); } /* Migrar tasks (1.6): stepper, cartão de escolha, linha de mapeamento e de decisão, selo de chegada */ .ds-steps { display: flex; align-items: center; gap: 2px; } .ds-steps__step { font: inherit; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 5px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; } .ds-steps__step b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; background: var(--hover); color: var(--muted); } .ds-steps__step[aria-current="step"] { background: var(--accent-16); color: var(--accent-text); } .ds-steps__step[aria-current="step"] b { background: var(--accent); color: #FFFFFF; } .ds-steps__step[data-done="true"] { color: var(--text-2); } .ds-steps__step[data-done="true"] b { background: var(--accent-20); color: var(--accent-text); } .ds-choice-card { font: inherit; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; text-align: left; cursor: pointer; background: transparent; border: 1px solid var(--border); color: var(--text-2); } .ds-choice-card[aria-checked="true"] { background: var(--accent-12); border-color: var(--accent-55); color: var(--text); } .ds-choice-card b { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; } .ds-choice-card span { font-size: 12px; color: var(--muted); line-height: 1.45; } .ds-map-row, .ds-decision-row { display: flex; align-items: center; gap: 10px; border-radius: 12px; background: var(--field); border: 1px solid var(--line); } .ds-map-row { padding: 6px 6px 6px 12px; } .ds-decision-row { min-height: 46px; padding: 5px 6px 5px 10px; } .ds-map-row .ds-select, .ds-decision-row .ds-select { font: inherit; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; box-sizing: border-box; border-radius: 10px; border: 1px solid var(--border); background: var(--field); color: var(--text); font-size: 12.5px; font-weight: 500; cursor: pointer; } .ds-map-row .ds-select { flex: 1 1 0; min-width: 0; height: 36px; } .ds-decision-row .ds-select { flex: none; width: 220px; } @keyframes ds-arrive-in { 0% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: none; } } .ds-arrive { flex: none; display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: var(--accent-20); color: var(--accent-text); animation: ds-arrive-in .5s cubic-bezier(.2,.9,.25,1.3) both; } /* Exportar planilha (1.7): prévia em grade e posição da coluna */ .ds-sheet-preview { display: grid; min-width: max-content; font-size: 12px; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; } .ds-sheet-preview > span { white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; padding: 8px 12px; color: var(--text-2); border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; } .ds-sheet-preview > span[role="columnheader"] { font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--muted); background: var(--field); } .ds-col-pos { flex: none; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; background: var(--accent-16); color: var(--accent-text); } /* Importar planilha (1.8): zona de soltar, número da revisão e barra de progresso */ @keyframes ds-drop-pulse { 0%, 100% { transform: none; } 50% { transform: scale(1.015); } } .ds-dropzone { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 20px; border-radius: 16px; cursor: pointer; text-align: center; border: 1.5px dashed var(--dashed); background: var(--field); transition: background .2s ease, border-color .2s ease; } .ds-dropzone[data-over="true"] { border-color: var(--accent); background: var(--accent-08); animation: ds-drop-pulse .6s ease infinite; } .ds-dropzone > i { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-16); color: var(--accent-text); } .ds-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--field); border: 1px solid var(--line); } .ds-stat b { font-size: 20px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .ds-progress-bar { height: 8px; border-radius: 999px; background: var(--hover); overflow: hidden; } .ds-progress-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .38s cubic-bezier(.2,.85,.25,1); } /* Plano de foco (1.9): widget com anel e relógio do painel */ .ds-focus-widget { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 8px; box-sizing: border-box; border-radius: 999px; background: var(--menu); border: 1px solid var(--border); box-shadow: var(--shadow-menu); } .ds-focus-widget__ring { position: relative; width: 36px; height: 36px; flex: none; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: var(--text-2); } .ds-focus-widget__phase { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); } .ds-focus-widget__time { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; } .ds-focus-clock { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 14px 14px; border-radius: 16px; background: var(--accent-08); border: 1px solid var(--accent-20); } .ds-focus-clock b { font-size: 44px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; } /* Central (1.10): linha da Saúde do quadro e cascata do “Por que não vê?” */ .ds-health-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; background: var(--field); border: 1px solid var(--border); } .ds-health-row[data-level="err"] { border-color: color-mix(in srgb, var(--color-red) 35%, transparent); } .ds-health-row__icon { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--tone-orange-bg); color: var(--tone-orange-fg); } .ds-health-row[data-level="err"] .ds-health-row__icon { background: var(--tone-red-bg); color: var(--tone-red-fg); } .ds-health-row__title { font-size: 13.5px; font-weight: 600; line-height: 1.35; } .ds-cascade { display: flex; flex-direction: column; } .ds-cascade__step { display: flex; gap: 12px; } .ds-cascade__rail { display: flex; flex-direction: column; align-items: center; width: 24px; flex: none; } .ds-cascade__mark { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; box-sizing: border-box; font-size: 12px; font-weight: 800; background: var(--tone-green-bg); color: var(--tone-green-fg); } .ds-cascade__step[data-state="stop"] .ds-cascade__mark { background: var(--tone-red-bg); color: var(--tone-red-fg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-red) 12%, transparent); } .ds-cascade__step[data-state="after"] { opacity: .5; } .ds-cascade__step[data-state="after"] .ds-cascade__mark { background: transparent; border: 1.5px dashed var(--border); color: var(--muted); } .ds-cascade__line { flex: 1; width: 2px; min-height: 14px; margin: 4px 0; border-radius: 2px; background: color-mix(in srgb, var(--color-green) 35%, transparent); } .ds-cascade__step[data-state="stop"] .ds-cascade__line, .ds-cascade__step[data-state="after"] .ds-cascade__line { background: var(--line); } .ds-cascade__step:last-child .ds-cascade__line { display: none; } .ds-cascade__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-bottom: 16px; } .ds-central-seal { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; background: var(--hover); color: var(--muted); } /* Semi-central (Central, etapa 4 · 1.154): o mesmo selo no azul da paleta, para quem vê a Central reduzida */ .ds-central-seal--semi { background: var(--tone-blue-bg); color: var(--tone-blue-fg); } /* selo PROTÓTIPO (1.158, oficializado em 30 out 2026): o que só existe para testar o protótipo (Simular lead, Simular notificação) */ .ds-proto-seal { display: inline-flex; align-items: center; flex: none; padding: 2px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; background: var(--hover); color: var(--muted); } .ds-btn .ds-proto-seal { margin-left: 2px; } /* modo para prints da documentação (app/prints.js, ?prints=1): some o que é da Central e do protótipo */ html.art-prints .ds-central-seal, html.art-prints .ds-proto-seal, html.art-prints [data-prints-off] { display: none !important; } /* ícone na linha (1.158): o da integração no painel Integrações da ficha; data-on="false" apaga */ .ds-line-row__icon { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--accent-14); color: var(--accent-text); transition: background .2s ease, color .2s ease; } .ds-line-row__icon[data-on="false"] { background: var(--hover); color: var(--muted); } /* indicador dos slides (Central › Releases, visualizador das Novidades · 1.157, aprovado em 30 out 2026): traços de 6px; o atual se estica até 18px no acento; os já vistos ficam no acento a .45. Cada traço é botão (vai ao slide) com área de toque de 20px. */ .ds-slide-dots { display: inline-flex; align-items: center; gap: 2px; } .ds-slide-dots__dot { font: inherit; display: grid; place-items: center; width: auto; height: 20px; padding: 0 2px; border: 0; background: transparent; cursor: pointer; } .ds-slide-dots__dot::before { content: ""; display: block; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--muted); opacity: .45; transition: width .32s cubic-bezier(.2,.9,.25,1.06), background .2s ease, opacity .2s ease; } .ds-slide-dots__dot[data-seen="true"]::before { background: var(--accent); opacity: .45; } .ds-slide-dots__dot[aria-current="step"]::before { width: 18px; background: var(--accent); opacity: 1; } .ds-slide-dots__dot:hover::before { opacity: .9; } /* Central, parte 2 (1.11): linha da Auditoria e da Lixeira */ .ds-audit-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 13px; line-height: 1.55; } .ds-audit-row__who { font-weight: 600; } .ds-audit-row__task { font-weight: 600; color: var(--accent-text); } .ds-audit-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 7px; font-size: 12px; font-weight: 500; background: var(--hover); color: var(--text-2); } .ds-audit-chip[data-old] { text-decoration: line-through; opacity: .8; } .ds-audit-row__time { margin-left: auto; flex: none; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .ds-trash-row { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 9px 12px; border-radius: 12px; } .ds-trash-left { flex: none; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--hover); color: var(--muted); } .ds-trash-left[data-soon] { background: var(--tone-orange-bg); color: var(--tone-orange-fg); } /* 1.18 · Pílula de escolha (Exportar: Formato e Período). 30px, contorno; escolhida em acento. */ .ds-radio-pill { font: inherit; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; background: transparent; border: 1px solid var(--border); color: var(--text-2); transition: background .2s ease, color .2s ease, border-color .2s ease; } .ds-radio-pill[aria-checked="true"] { background: var(--accent-16); border-color: var(--accent-55); color: var(--accent-text); } /* 1.18 · Resumo do período e números que mudam com ele: sobem 5px e acendem (340 ms) */ .ds-period-sum { font-size: 12px; font-weight: 600; color: var(--accent-text); animation: dsPerNum .34s cubic-bezier(.2,.9,.25,1.06) both; } @keyframes dsPerNum { 0% { opacity: .35; transform: translateY(5px); } 100% { opacity: 1; transform: none; } } /* Visão geral do quadro (BoardOverview, 1.18): cartão de funcionalidade e linha da matriz de Notificações */ .ds-feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; } .ds-feature-card { display: flex; flex-direction: column; gap: 8px; min-height: 150px; box-sizing: border-box; padding: 14px; border-radius: 14px; background: var(--input-bg); border: 1px solid var(--border); cursor: pointer; } .ds-feature-card[data-lv="err"] { border-color: color-mix(in srgb, var(--color-red) 35%, transparent); } .ds-feature-card__icon { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--accent-14); color: var(--accent-text); } .ds-feature-card[data-on="false"] .ds-feature-card__icon { background: var(--hover); color: var(--muted); } .ds-feature-card__num { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; } .ds-feature-card__go { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; font-size: 12px; font-weight: 600; color: var(--accent-text); } .ds-notif-row { display: grid; grid-template-columns: minmax(0, 1.5fr) 68px minmax(0, 1.1fr) 52px 34px; align-items: center; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--line); transition: opacity .25s ease; } .ds-notif-row[data-on="false"] { opacity: .55; } .ds-channel-btn, .ds-root .ds-channel-btn { width: 30px; height: 28px; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; } .ds-channel-btn[aria-pressed="true"] { border-color: var(--accent-45); background: var(--accent-16); color: var(--accent-text); } .ds-channel-btn[data-fixed][aria-pressed="false"] { opacity: .35; cursor: default; } .ds-aud-btn, .ds-root .ds-aud-btn { display: flex; white-space: nowrap; overflow: hidden; align-items: center; gap: 8px; max-width: 100%; height: 30px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--border); background: transparent; color: var(--text-2); font-size: 12px; font-weight: 500; cursor: pointer; } .ds-aud-btn[aria-expanded="true"] { border-color: var(--accent-55); background: var(--accent-12); } .ds-filter-chip, .ds-root .ds-filter-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 10px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-2); font-size: 12px; font-weight: 600; cursor: pointer; } .ds-filter-chip[aria-pressed="true"] { border-color: var(--accent-55); background: var(--accent-16); color: var(--accent-text); } .ds-var-btn, .ds-root .ds-var-btn { height: 24px; padding: 0 8px; border-radius: 7px; border: 1px solid var(--border); background: transparent; color: var(--text-2); font-size: 11.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; } /* Entre empresas (1.18): marca da empresa, citação da mensagem de contexto e faixa de cliente que já existe */ .ds-company-mark { width: 34px; height: 34px; flex: none; border-radius: 11px; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--accent-16); color: var(--accent-text); } .ds-quote { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: rgba(140,114,219,.08); border-left: 3px solid rgba(140,114,219,.6); font-size: 13px; line-height: 1.55; } [data-theme="light"] .ds-quote { background: rgba(140,114,219,.06); } .ds-match { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: rgba(219,134,72,.16); color: #F3C7A5; font-size: 12.5px; line-height: 1.45; } [data-theme="light"] .ds-match { background: rgba(219,134,72,.14); color: #6E3810; } /* Campo com formato (1.18): texto de ajuda e caixa de teste ao vivo (app/mascaras.js) */ .ds-field-help { display: block; font-size: 11px; line-height: 1.35; color: var(--muted); } .ds-fmt-test { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--hover); } .ds-fmt-test input { font: inherit; height: 34px; box-sizing: border-box; padding: 0 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-size: 13px; outline: none; transition: border-color .2s ease; } .ds-fmt-test[data-st="ok"] input { border-color: var(--color-green); } .ds-fmt-test[data-st="bad"] input { border-color: var(--color-red); } .ds-fmt-test__st { font-size: 12px; line-height: 1.4; color: var(--muted); transition: color .2s ease; } .ds-fmt-test[data-st="ok"] .ds-fmt-test__st { color: var(--tone-green-fg); } .ds-fmt-test[data-st="bad"] .ds-fmt-test__st { color: var(--tone-red-fg); } /* 1.18 · Substatus (Fase › Coluna › Substatus): pílula discreta com bolinha da cor do substatus */ .ds-sst-pill { display: inline-flex; align-items: center; gap: 6px; height: var(--control-2xs); max-width: 170px; padding: 0 9px; border-radius: var(--radius-pill); font-size: var(--text-2xs); font-weight: 600; white-space: nowrap; background: transparent; box-shadow: inset 0 0 0 1px var(--border); color: var(--text-2); } .ds-sst-pill > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ds-sst-pill--empty { box-shadow: none; border: 1px dashed var(--border); color: var(--muted); font-weight: 500; } /* 1.18 · Popover do progresso por fase */ .ds-prog-pop { width: 320px; box-sizing: border-box; padding: 6px; border-radius: 16px; background: var(--menu); border: 1px solid var(--border); box-shadow: var(--shadow-menu); display: flex; flex-direction: column; gap: 2px; } .ds-prog-pop__phase { display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 7px 10px; border-radius: 9px; font-size: 13px; } .ds-prog-pop__bar { display: block; height: 4px; border-radius: 999px; background: var(--hover); overflow: hidden; } .ds-prog-pop__bar > i { display: block; height: 100%; border-radius: 999px; transition: width .5s var(--ease); } .ds-prog-pop__sub { display: flex; align-items: center; gap: 9px; min-height: 30px; padding: 4px 10px 4px 26px; border-radius: 9px; font-size: 12.5px; color: var(--text-2); } /* 1.18 · Projetos (prototipo/Projects.dc.html): saúde do update (forma + cor + rótulo), progresso com parcial listrado, ícone do projeto, linha de marco e o bloco “desde o último update”. Ver componentes/17-projetos.md */ .ds-health { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; } .ds-health svg { flex: none; width: 13px; height: 13px; } .ds-health--on { color: var(--tone-green-fg); } .ds-health--on svg { color: var(--tone-green-dot); } .ds-health--risk { color: var(--tone-amber-fg); } .ds-health--risk svg { color: var(--tone-amber-dot); } .ds-health--off { color: var(--tone-red-fg); } .ds-health--off svg { color: var(--tone-red-dot); } .ds-health--none { color: var(--faint); } .ds-health--none svg { color: var(--faint); } .ds-progress--partial > .ds-progress__done { background: var(--accent); } .ds-progress--partial > .ds-progress__done[data-full] { background: var(--tone-green-dot); } .ds-progress--partial > .ds-progress__doing { background: repeating-linear-gradient(135deg, rgba(140,114,219,.55) 0 5px, rgba(140,114,219,.25) 5px 10px); } .ds-project-icon { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; } .ds-project-icon--lg { width: 52px; height: 52px; border-radius: 15px; } .ds-milestone { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 8px 6px 4px; border-radius: 12px; } .ds-milestone--next { background: var(--accent-08); box-shadow: inset 0 0 0 1px var(--accent-30); } .ds-milestone__mark { width: 24px; height: 24px; flex: none; border-radius: 7px; display: grid; place-items: center; background: var(--hover); color: var(--muted); } .ds-milestone--next .ds-milestone__mark { background: var(--accent-18); color: var(--accent-text); } .ds-milestone--done .ds-milestone__mark { background: var(--tone-green-bg); color: var(--tone-green-fg); } .ds-since { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--border); background: rgba(140,114,219,.05); } /* Alça de recolher a barra lateral (1.32): a mesma no Kanban e em todo módulo. Aparece no hover do trilho ou da barra. */ .ds-side-handle { position: absolute; top: 24px; right: -14px; z-index: 3; font: inherit; width: 28px; height: 28px; padding: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border-hover); color: var(--text-2); box-shadow: 0 6px 16px -6px rgba(0,0,0,.6); opacity: 0; transform: scale(.7); pointer-events: none; transition: opacity .2s ease, transform .35s cubic-bezier(.22,1.28,.36,1), background .2s ease; } .ds-side-handle svg { transition: transform .4s var(--ease); } :where(.ds-side-demo:hover, [data-side-hover]) .ds-side-handle { opacity: 1; transform: scale(1); pointer-events: auto; } .is-collapsed .ds-side-handle svg { transform: rotate(180deg); } .ds-side-demo { display: flex; height: 150px; border: 1px solid var(--border); border-radius: 12px; overflow: clip; background: var(--page, var(--surface)); } .ds-side-demo__rail { width: 34px; flex: none; background: var(--rail, var(--surface)); border-right: 1px solid var(--line, var(--border)); } .ds-side-demo__wrap { position: relative; flex: none; display: flex; z-index: 2; } .ds-side-demo__side { width: 120px; overflow: clip; box-sizing: border-box; padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--text-2); background: var(--panel, var(--surface)); border-right: 1px solid var(--line, var(--border)); white-space: nowrap; transition: width .4s var(--ease), padding .4s var(--ease), border-color .3s ease; } .is-collapsed .ds-side-demo__side { width: 0; padding-left: 0; padding-right: 0; border-right-color: transparent; } .ds-side-demo__main { flex: 1; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--muted); } /* Novo cliente (1.33): selo de origem do dado (“da Receita”) e faixa de possível duplicado com a escolha da pessoa */ .ds-source-tag { display: inline-flex; align-items: center; height: 16px; padding: 0 6px; margin-left: 6px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .03em; vertical-align: 1px; background: color-mix(in srgb, var(--tone-green-dot, #8FD86A) 18%, transparent); color: var(--tone-green-fg, #2F6416); } .ds-dup-banner { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; transition: background .25s ease, border-color .25s ease; background: color-mix(in srgb, #E0A44E 14%, transparent); border: 1px solid color-mix(in srgb, #E0A44E 45%, transparent); } .ds-dup-banner__title { font-size: 13px; font-weight: 600; color: var(--tone-amber-fg, #705227); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-dup-banner.is-forced { background: var(--hover); border-color: var(--border); } .ds-dup-banner.is-forced .ds-dup-banner__title { color: var(--text-2); } /* Organizar pastas (1.35): canvas de pastas do Novo cliente, no modelo do explorador do Arthemis de hoje */ .ds-folder-tile { font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 112px; padding: 8px; border: 0; border-radius: 14px; background: transparent; color: var(--text); cursor: default; transition: background .15s ease, box-shadow .2s ease; } .ds-folder-tile svg { color: #E0A44E; } .ds-folder-tile b { font-size: 12.5px; font-weight: 600; text-align: center; } .ds-folder-tile span { font-size: 11px; color: var(--muted); } .ds-folder-tile:hover { background: var(--hover); } .ds-folder-tile[aria-selected="true"] { background: var(--accent-12); box-shadow: inset 0 0 0 1px var(--accent-45); } @keyframes dsFoIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } /* Painéis da ficha do cliente (1.36): linha de arquivo e cartão de contrato */ .ds-file-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 8px; border-radius: 10px; transition: background .15s ease; } .ds-file-row:hover { background: var(--hover); } .ds-file-row__icon { position: relative; width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); } .ds-file-row__icon b { position: absolute; bottom: -4px; right: -6px; font-size: 8px; font-weight: 800; padding: 1px 4px; border-radius: 4px; background: var(--c); color: #fff; line-height: 1.3; } .ds-file-row__tag { font-size: 9px; font-weight: 800; letter-spacing: .06em; height: 16px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--accent-12); color: var(--accent-text); } .ds-contract-card { display: flex; flex-direction: column; gap: 9px; padding: 14px; border-radius: 14px; border: 1px solid var(--line, var(--border)); background: var(--input-bg, var(--surface)); } .ds-contract-card__pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: color-mix(in srgb, #E0A44E 16%, transparent); color: var(--tone-amber-fg); } .ds-contract-card__bar { display: block; height: 5px; border-radius: 5px; background: var(--hover); overflow: hidden; } .ds-contract-card__bar span { display: block; height: 100%; border-radius: 5px; background: #E0A44E; } /* Explorador de arquivos do cliente (1.37): canvas com pontinhos e cartões da grade */ .ds-fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; padding: 14px; border-radius: 14px; border: 1px solid var(--line, var(--border)); background-color: var(--sheet, var(--surface)); background-image: radial-gradient(rgba(127,127,127,.18) 1px, transparent 1.2px); background-size: 18px 18px; } .ds-fx-tile { font: inherit; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 10px; border: 0; border-radius: 14px; background: transparent; color: var(--text); cursor: default; transition: background .15s ease, box-shadow .2s ease; } .ds-fx-tile:hover { background: var(--hover); } .ds-fx-tile[aria-selected="true"] { background: var(--accent-12); box-shadow: inset 0 0 0 1.5px var(--accent-55); } .ds-fx-tile b { font-size: 12.5px; font-weight: 600; text-align: center; } .ds-fx-tile > span:last-child { font-size: 11px; color: var(--muted); } .ds-fx-tile__icon { position: relative; width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); } .ds-fx-tile__icon em { position: absolute; bottom: -5px; right: -7px; font-style: normal; font-size: 9px; font-weight: 800; padding: 2px 5px; border-radius: 5px; background: var(--c); color: #fff; line-height: 1.2; } .ds-fx-tile__count { position: absolute; top: -6px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; display: grid; place-items: center; font-style: normal; font-size: 10.5px; font-weight: 700; background: var(--surface); color: var(--text-2); box-shadow: 0 0 0 1px var(--border); } .ds-fx-tile__badge { position: absolute; bottom: -5px; left: -7px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; } /* Agenda do cliente (1.38): cartão do compromisso com bloco de horário e proposta do cliente */ .ds-ag-card { display: flex; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, #E0A44E 50%, transparent); background: var(--surface); } .ds-ag-card__time { width: 52px; flex: none; align-self: flex-start; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); } .ds-ag-card__time b { font-size: 14px; font-variant-numeric: tabular-nums; } .ds-ag-card__time span { font-size: 10.5px; font-weight: 600; opacity: .85; } .ds-ag-card__reply { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, #E0A44E 11%, transparent); font-size: 12.5px; color: var(--tone-amber-fg); } .ds-chip-mini { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--hover); color: var(--text-2); } /* ---------- Trilho do sistema em grupos (1.43 · 25 out 2026) ---------- */ .ds-rail { width: 76px; box-sizing: border-box; background: var(--rail); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 0; } .ds-rail__sep { width: 28px; height: 1px; background: var(--border); margin: 8px 0; } .ds-rail__item { font: inherit; width: 62px; padding: 7px 0 6px; border-radius: 12px; border: 0; background: transparent; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; transition: background .2s ease, color .2s ease; } .ds-rail__item span { font-size: 10.5px; font-weight: 500; line-height: 1.1; white-space: nowrap; } .ds-rail__item[aria-current="page"] { background: var(--hover); color: var(--accent-text); } .ds-rail__item[aria-current="page"] span { font-weight: 600; color: var(--text); } [data-theme="light"] .ds-rail__item[aria-current="page"] { background: var(--surface); box-shadow: 0 1px 2px rgba(27,27,27,.08), inset 0 0 0 1px var(--border); } /* ---------- Módulo em redesenho (1.43 · 25 out 2026) ---------- */ .ds-redesenho { max-width: 500px; box-sizing: border-box; padding: 36px 32px 28px; border-radius: 18px; border: 1.5px dashed var(--dashed); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; animation: dsRedIn .42s var(--ease) both; } .ds-redesenho__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); } .ds-redesenho__seal { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--tone-amber-bg); color: var(--tone-amber-fg); } .ds-redesenho__seal::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #E0A44E; } .ds-redesenho__title { margin: 4px 0 0; font-size: 17px; font-weight: 600; } .ds-redesenho__text { margin: 0; max-width: 400px; font-size: 13px; line-height: 1.5; color: var(--muted); } .ds-redesenho__list { align-self: stretch; margin-top: 12px; padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); text-align: left; } .ds-redesenho__list b { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; } .ds-redesenho__list li { display: flex; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--text-2); } .ds-redesenho__list li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; margin-top: 7px; background: var(--accent); } .ds-redesenho__list ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; } @keyframes dsRedIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } } /* ---------- Calendário · proposta em avaliação (26 out 2026) ---------- */ /* Grade aprovada para proposta em 26/10/2026. Controles: classes nativas do DS. * Só a geometria temporal e os estados próprios da grade são definidos aqui. */ .ds-calendar { display:flex; flex-direction:column; min-height:0; height:100%; background:var(--page); } .ds-calendar button, .ds-calendar input { font-family:var(--font-sans); } .ds-calendar button:focus-visible { outline:0; box-shadow:var(--focus-ring-strong); z-index:5; } .ds-calendar__toolbar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; padding:12px 0 18px; } .ds-calendar__period { display:flex; align-items:center; gap:4px; min-width:0; } .ds-calendar .ds-calendar__title { font-size:var(--text-display); font-weight:600; letter-spacing:var(--tracking-display); padding:0 8px 0 0; text-transform:none; } .ds-calendar__title > span::first-letter { text-transform:uppercase; } .ds-calendar .ds-btn--sm { font-size:var(--text-sm); font-weight:500; } .ds-calendar .ds-tabs__btn { font-size:var(--text-sm); font-weight:600; } .ds-calendar .ds-choice { font-size:var(--text-xs); } .ds-calendar__period > .ds-btn--outline { margin-left:10px; } .ds-calendar__views { width:calc(var(--n, 3) * 76px); flex:none; } .ds-calendar__actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } /* Agenda parte 2: corpo com a coluna do Dia, expediente sombreado, vista Ano (mês pequeno) e vista Agenda (lista) */ .ds-calendar__body { display:flex; gap:16px; flex:1; min-height:0; } .ds-calendar__body > .ds-calendar__viewport { flex:1; min-width:0; } .ds-calendar__side { flex:0 0 300px; display:flex; flex-direction:column; gap:14px; min-height:0; overflow:auto; } .ds-calendar__side-picker { padding:14px; border-radius:var(--radius-xl); border:1px solid var(--border); background:var(--surface); } .ds-calendar__live { display:flex; flex-direction:column; gap:10px; } .ds-calendar__live-empty { padding:18px 14px; border-radius:var(--radius-xl); border:1px dashed var(--border); } .ds-calendar__year { display:grid; grid-template-columns:repeat(auto-fill, minmax(232px, 1fr)); gap:22px 26px; padding:18px 20px 24px; } .ds-calendar__ymonth-title { font:inherit; border:0; background:transparent; padding:0 0 8px; color:var(--text); font-size:var(--text-sm); font-weight:600; cursor:pointer; } .ds-calendar__ymonth-title:hover { color:var(--accent-text); } .ds-calendar__ygrid { display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; } .ds-calendar__ywd { font-size:var(--text-3xs); color:var(--faint); text-align:center; padding-bottom:4px; text-transform:uppercase; } .ds-calendar__yday { position:relative; font:inherit; height:30px; border:0; border-radius:9px; background:transparent; color:var(--text-2); font-size:12px; font-weight:500; cursor:pointer; transition:background .15s ease, color .15s ease; } .ds-calendar__yday:hover { background:var(--hover); } /* com hover deslizante (data-glide na grade): o fundo é o do glide, não o do dia (1.193) */ [data-glide] > .ds-calendar__yday:hover { background: transparent; } .ds-calendar__yday[data-blank="true"] { pointer-events:none; } .ds-calendar__yday[data-today="true"] { color:var(--accent-text); font-weight:700; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 50%,transparent); } .ds-calendar__ydot { position:absolute; left:50%; bottom:3px; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:var(--event-color); } .ds-calendar__agenda { display:flex; flex-direction:column; gap:18px; padding:18px 20px 24px; max-width:820px; } .ds-calendar__agenda-day { display:flex; flex-direction:column; gap:10px; } .ds-calendar__agenda-head { margin:0; font-size:var(--text-2xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); } .ds-calendar__agenda-head[data-today="true"] { color:var(--accent-text); } .ds-calendar__agenda-item { cursor:pointer; } .ds-calendar__agenda-row { gap:10px; } .ds-calendar__agenda-more { align-self:flex-start; } /* Agenda parte 3: Exibição (Minha visualização), popover do DS com interruptores */ .ds-calendar__exib { position:fixed; z-index:400; width:320px; display:flex; flex-direction:column; gap:4px; padding:10px; } .ds-calendar__pop { z-index:400; } /* menu do cabeçalho da Agenda (Google, 1.94): acima da camada que fecha ao clicar fora (390), como o Exibição */ .ds-calendar__exib-row { width:100%; align-items:flex-start; gap:12px; padding:8px 6px; text-align:left; border-radius:var(--radius-item); } .ds-calendar__exib-row .ds-switch__track { flex:none; margin-top:2px; } .ds-calendar__exib .ds-pop__note { margin:6px 6px 0; } @media(max-width:1100px) { .ds-calendar__side { display:none; } } /* Agenda 1b: arrastar como o card do Kanban (fantasma com mola e inclinação, vaga tracejada no destino) e esticar pela borda de baixo */ .ds-calendar [data-movable="true"] { touch-action:none; cursor:grab; } .ds-calendar__resize { position:absolute; left:0; right:0; bottom:0; height:7px; cursor:ns-resize; opacity:0; transition:opacity .15s ease; } .ds-calendar__resize::after { content:''; position:absolute; left:50%; bottom:2px; width:18px; height:3px; margin-left:-9px; border-radius:2px; background:var(--event-color); } .ds-calendar__event:hover .ds-calendar__resize, .ds-calendar__event[data-dragging="resize"] .ds-calendar__resize { opacity:.8; } .ds-calendar [data-dragging="resize"] { z-index:30; cursor:ns-resize; transition:none; } .ds-calendar [data-drag-slot="true"] { z-index:20; border:2px dashed color-mix(in srgb,var(--accent) 55%,transparent) !important; background:color-mix(in srgb,var(--accent) 8%,transparent) !important; box-shadow:none; transition:transform .16s cubic-bezier(.2,.9,.25,1); } .ds-calendar [data-drag-slot="true"] > * { visibility:hidden; } .ds-calendar-ghost { will-change:transform; transform-origin:50% 50%; cursor:grabbing; transition:none; } .ds-calendar-ghost .ds-calendar__resize { display:none; } .ds-calendar-ghost[data-drag-time] .ds-calendar__ev-time { visibility:hidden; } .ds-calendar__event[data-drag-time]:not(.ds-calendar-ghost) .ds-calendar__ev-time { visibility:hidden; } .ds-calendar__month-day[data-drop="true"] { background:color-mix(in srgb,var(--accent) 8%,transparent); box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent); } [data-drag-time]::after { content:attr(data-drag-time); position:absolute; top:5px; left:7px; padding:1px 6px; border-radius:999px; background:var(--event-color); color:#fff; font-size:var(--text-3xs); font-weight:700; font-variant-numeric:tabular-nums; } .ds-calendar__controls { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding-bottom:16px; } .ds-calendar__search { display:flex; align-items:center; position:relative; width:210px; color:var(--muted); } .ds-calendar__search > svg { position:absolute; left:10px; pointer-events:none; } .ds-calendar__search .ds-input { width:100%; height:var(--control-md); border-radius:var(--radius-md); padding-left:32px; font-size:var(--text-xs); background:transparent; } .ds-calendar__layers { margin-left:auto; display:flex; align-items:center; flex-wrap:wrap; gap:8px; } .ds-calendar__layers > .ds-xs { margin-right:2px; } .ds-calendar__caption { display:flex; gap:12px; justify-content:space-between; padding:0 0 12px; color:var(--muted); font-size:var(--text-xs); } .ds-calendar__viewport { position:relative; flex:1; min-height:240px; overflow:auto; border:1px solid var(--border); border-radius:var(--radius-xl); background:var(--surface); } .ds-calendar__month { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); grid-template-rows:36px repeat(var(--weeks,5),minmax(var(--calendar-month-row-min),1fr)); min-width:630px; height:100%; } .ds-calendar__weekday { position:sticky; top:0; z-index:7; height:36px; padding:10px 14px; background:var(--surface); border-bottom:1px solid var(--border); font-size:var(--text-2xs); color:var(--muted); } .ds-calendar__month-day { min-height:0; padding:6px 5px; overflow:hidden; border-right:1px solid var(--border); border-bottom:1px solid var(--border); min-width:0; } .ds-calendar__month-day:nth-child(7n) { border-right:0; } .ds-calendar__month-day[data-outside="true"] { background:var(--input-bg); } .ds-calendar__month-day[data-outside="true"] > .ds-calendar__date { color:var(--faint); } .ds-calendar__date { display:inline-grid; place-items:center; width:28px; height:28px; margin:0 0 6px 4px; border:0; border-radius:var(--radius-md); background:transparent; color:var(--text-2); cursor:pointer; font-size:var(--text-sm); font-weight:500; } .ds-calendar__date:hover { background:var(--hover); } [data-today="true"] > .ds-calendar__date { background:var(--primary); color:var(--on-primary); font-weight:600; } .ds-calendar .ds-calendar__month-event { display:flex; align-items:center; gap:5px; width:100%; min-height:27px; padding:4px 6px; margin:2px 0; border:0; border-radius:var(--radius-tiny); background:color-mix(in srgb,var(--event-color,var(--accent)) 10%,var(--surface)); color:var(--text-2); font-size:var(--text-2xs); text-align:left; cursor:pointer; } .ds-calendar__month-event:hover { background:color-mix(in srgb,var(--event-color,var(--accent)) 18%,var(--surface)); } .ds-calendar__event-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ds-calendar__event-time { flex:none; color:var(--muted); font-size:var(--text-3xs); font-variant-numeric:tabular-nums; } .ds-calendar__dot { width:6px; height:6px; flex:none; border-radius:50%; background:var(--event-color,var(--accent)); } [data-source="task"] .ds-calendar__dot { width:7px; height:7px; border:1px solid var(--event-color,var(--accent)); background:transparent; } [data-source="milestone"] .ds-calendar__dot { border-radius:1px; transform:rotate(45deg); } .ds-calendar__month-event[data-source="task"], .ds-calendar__month-event[data-source="milestone"] { background:transparent; } .ds-calendar__month-event[data-source="task"]:hover, .ds-calendar__month-event[data-source="milestone"]:hover { background:var(--hover); } .ds-calendar [data-canceled="true"] { opacity:.6; } .ds-calendar [data-canceled="true"] strong, .ds-calendar [data-canceled="true"] .ds-calendar__event-label { text-decoration:line-through; } .ds-calendar__more { padding:4px 7px; border:0; border-radius:var(--radius-tiny); background:transparent; color:var(--muted); font-size:var(--text-2xs); cursor:pointer; } .ds-calendar__more:hover { background:var(--hover); color:var(--text); } .ds-calendar__time { display:grid; grid-template-columns:var(--calendar-time-gutter) repeat(var(--days),minmax(0,1fr)); min-width:var(--calendar-week-min-width); } .ds-calendar__time[style*="--days:1;"] { min-width:340px; } .ds-calendar__day-head { position:sticky; top:0; z-index:7; height:var(--calendar-day-head); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:0; border-bottom:1px solid var(--border); border-right:1px solid var(--border); background:var(--surface); color:var(--muted); font-size:var(--text-2xs); cursor:pointer; } .ds-calendar__day-head > .ds-calendar__date { margin:0; } .ds-calendar__day-head[data-today="true"] { color:var(--accent-text); } .ds-calendar__zone { font-size:var(--text-3xs); cursor:default; } .ds-calendar__all-label { position:sticky; top:var(--calendar-day-head); z-index:6; background:var(--surface); display:flex; align-items:center; justify-content:center; min-height:32px; font-size:var(--text-3xs); color:var(--muted); border-right:1px solid var(--border); border-bottom:1px solid var(--border); } .ds-calendar__all-day { position:sticky; top:var(--calendar-day-head); z-index:6; background:var(--surface); max-height:136px; overflow-y:auto; min-height:32px; padding:2px 4px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); min-width:0; } .ds-calendar__hours { position:relative; height:var(--hours-height); border-right:1px solid var(--border); color:var(--muted); } .ds-calendar__hours > span { position:absolute; left:0; right:9px; padding-top:6px; font-size:var(--text-3xs); text-align:right; font-variant-numeric:tabular-nums; } .ds-calendar__day-column { position:relative; height:var(--hours-height); border-right:1px solid var(--border); min-width:0; } .ds-calendar__day-column[data-weekend="true"] { background:var(--input-bg); } .ds-calendar__slot { position:absolute; inset-inline:0; height:var(--calendar-hour-height); padding:0; background:transparent; border:0; border-top:1px solid var(--border); cursor:pointer; } .ds-calendar__slot::after { content:""; position:absolute; top:31px; left:0; right:0; border-top:1px dashed color-mix(in srgb,var(--border) 55%,transparent); } .ds-calendar__slot:hover { background:var(--accent-08); } .ds-calendar__event { position:absolute; display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-height:22px; box-sizing:border-box; padding:6px 7px; border:1px solid color-mix(in srgb,var(--event-color) 22%,var(--border)); border-left:3px solid var(--event-color); border-radius:var(--radius-sm); background:color-mix(in srgb,var(--event-color) 10%,var(--surface)); text-align:left; overflow:hidden; cursor:pointer; transition:box-shadow .2s ease,background .2s ease; } .ds-calendar__event:hover { background:color-mix(in srgb,var(--event-color) 17%,var(--surface)); box-shadow:var(--shadow-card-hover); z-index:4; } .ds-calendar__now { position:absolute; left:0; right:0; height:2px; z-index:5; pointer-events:none; background:var(--accent); } .ds-calendar__now > span { position:absolute; width:6px; height:6px; left:-3px; top:-2px; background:var(--accent); border-radius:50%; } .ds-calendar__empty { margin:0 0 12px; flex:none; background:var(--surface); } .ds-calendar__footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:12px 0 0; font-size:var(--text-2xs); color:var(--muted); } .ds-calendar__dismiss { position:fixed; inset:0; z-index:390; } .ds-calendar__picker { position:fixed; width:300px; padding:14px; border-radius:var(--radius-2xl); border:1px solid var(--border); background:var(--menu); box-shadow:var(--shadow-menu); z-index:400; max-height:calc(100vh - 24px); overflow:auto; } .ds-calendar .ds-overlay { z-index:410; } .ds-calendar__details { display:flex; flex-direction:column; gap:0; margin:18px 0 0; } .ds-calendar__details dd { font-size:var(--text-sm); margin:0; color:var(--text-2); white-space:pre-wrap; overflow-wrap:anywhere; } @keyframes calendarEnter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } } .ds-calendar__month, .ds-calendar__time { animation:calendarEnter .3s var(--ease) both; } @media(max-width:1100px) { .ds-calendar__layers { margin-left:0; } .ds-calendar .ds-calendar__title { font-size:var(--text-h2); } .ds-calendar__views { width:calc(var(--n, 3) * 64px); } } @media(max-width:700px) { .ds-calendar__toolbar { padding-top:8px; gap:10px; } .ds-calendar__views { width:100%; } .ds-calendar__period { flex-wrap:wrap; } .ds-calendar .ds-calendar__title { font-size:var(--text-h3); } .ds-calendar__search { flex:1; min-width:140px; } .ds-calendar__footer > span:last-child { display:none; } } @media(prefers-reduced-motion:reduce) { .ds-calendar *, .ds-calendar *::after { animation:none!important; transition:none!important; } } .ds-calendar__month-day .ds-calendar__date { margin-bottom:2px; } .ds-calendar .ds-calendar__month-day .ds-calendar__month-event { min-height:22px; height:22px; padding:2px 6px; margin:1px 0; } /* Excesso aprovado: um bloco neutro na trilha reservada; a lista usa ds-pop__item. */ .ds-calendar__event[data-overflow="true"] { border:1px dashed var(--border-hover); background:var(--input-bg); color:var(--text-2); } .ds-calendar__event[data-overflow="true"]:hover { background:var(--hover); } /* Bloco do calendário por altura (27 out 2026): data-size 1 (até 30 min, uma linha), 2 (45–60 min), 3 (75 min ou mais); data-layout a (hora em cima; a B foi descartada na comparação) */ .ds-calendar__event[data-size] { display:grid; align-content:start; column-gap:6px; row-gap:3px; } .ds-calendar__event[data-size] > * { min-width:0; } .ds-calendar__ev-time { grid-area:time; display:flex; gap:4px; align-items:center; font-size:var(--text-3xs); font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--text-2); } .ds-calendar__ev-time > svg { flex:none; opacity:.8; } .ds-calendar__ev-status { width:6px; height:6px; flex:none; border-radius:50%; background:var(--status-color,transparent); } .ds-calendar__ev-title { grid-area:title; display:flex; gap:4px; align-items:baseline; min-width:0; overflow:hidden; white-space:nowrap; font-size:var(--text-xs); line-height:var(--leading-tight); } .ds-calendar__ev-title > strong { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; font-weight:600; } .ds-calendar__ev-title > span { flex:0 2 auto; min-width:4em; overflow:hidden; text-overflow:ellipsis; font-size:var(--text-3xs); color:var(--muted); } .ds-calendar__ev-client { grid-area:client; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:var(--text-3xs); color:var(--muted); } .ds-calendar__ev-who { grid-area:who; display:flex; align-items:center; justify-self:start; } .ds-calendar__ev-who > span + span { margin-left:-5px; } .ds-calendar__ev-more { height:16px; min-width:16px; padding:0 4px; box-sizing:border-box; border-radius:999px; display:grid; place-items:center; background:var(--hover); color:var(--text-2); font-size:9px; font-weight:700; box-shadow:0 0 0 1.5px var(--surface); } .ds-calendar__ev-place { grid-area:place; align-self:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:var(--text-3xs); color:var(--muted); text-align:right; } .ds-calendar__event[data-size="1"] { grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"time title who"; align-content:center; padding-top:3px; padding-bottom:3px; } .ds-calendar__event[data-size="1"] .ds-calendar__ev-time > svg { display:none; } .ds-calendar__event[data-size="1"] .ds-calendar__ev-who { justify-self:end; } .ds-calendar__event[data-size="2"][data-layout="a"] { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"time who" "title title"; } .ds-calendar__event[data-size="2"][data-layout="a"] .ds-calendar__ev-who { justify-self:end; } .ds-calendar__event[data-size="3"][data-layout="a"] { grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto auto 1fr; grid-template-areas:"time time" "title title" "client client" "who place"; } .ds-calendar__event[data-size="3"] .ds-calendar__ev-title { white-space:normal; } .ds-calendar__event[data-size="3"] .ds-calendar__ev-title > strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .ds-calendar__event[data-size="3"] .ds-calendar__ev-who, .ds-calendar__event[data-size="3"] .ds-calendar__ev-place { align-self:end; } .ds-calendar__event[data-canceled="true"] .ds-calendar__ev-title > strong { text-decoration:line-through; } .ds-calendar__month-who { flex:none; display:flex; } /* cliente como badge: a pílula de origem do card do Kanban (fundo --tag, texto --text-2, 600), no tamanho do bloco */ .ds-calendar__event[data-client="badge"] .ds-calendar__ev-title > span, .ds-calendar__event[data-client="badge"] .ds-calendar__ev-client { display:inline-flex; align-items:center; height:16px; padding:0 6px; border-radius:999px; background:color-mix(in srgb,var(--event-color) 24%,var(--surface)); color:var(--text); font-size:10px; font-weight:600; align-self:center; justify-self:start; max-width:100%; box-sizing:border-box; } .ds-calendar__event[data-client="badge"] .ds-calendar__ev-title > span { display:block; line-height:16px; } .ds-calendar__event[data-client="badge"] .ds-calendar__ev-client { display:block; line-height:16px; } .ds-calendar__month-badge { flex:0 4 auto; min-width:2.5em; max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; height:16px; line-height:16px; padding:0 6px; border-radius:999px; background:color-mix(in srgb,var(--event-color,var(--accent)) 24%,var(--surface)); color:var(--text); font-size:10px; font-weight:600; } .ds-calendar__event[data-size="2"][data-layout="a"][data-client="badge"] { grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"time client who" "title title title"; } /* Página de módulo, caixa de seção, linha com borda, legenda e popover de painel (1.79, 27 out 2026): o que as páginas Salas e Agendamentos montavam à mão (cópias de Dados do quadro, da Visão geral e de Configurações de Clientes) virou classe */ .ds-page-title { margin: 6px 0 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--text); } .ds-page-sub { margin: 4px 0 0; max-width: 720px; font-size: var(--text-sm); line-height: 1.45; color: var(--muted); } .ds-section-box { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface); min-width: 0; } .ds-section-box__title { font-size: var(--text-sm); font-weight: 600; color: var(--text); } .ds-section-box__help { font-size: var(--text-xs); line-height: 1.45; color: var(--muted); } .ds-line-row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 4px 0 10px; border-radius: var(--radius-md); border: 1px solid var(--border); font-size: var(--text-sm); } .ds-line-row__date { flex: none; width: 44px; font-weight: 600; font-variant-numeric: tabular-nums; } .ds-line-row__meta { flex: none; font-size: var(--text-xs); color: var(--muted); font-variant-numeric: tabular-nums; } .ds-line-row__text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ds-legend { display: flex; flex-wrap: wrap; gap: 12px; } .ds-legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--muted); } .ds-legend__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--dot, var(--accent)); } .ds-legend__dot.ds-hatch { background: repeating-linear-gradient(135deg, #E2C25B 0 3px, rgba(226,194,91,.5) 3px 6px); } .ds-pop--panel { width: var(--pop-w, 300px); padding: 12px; gap: 12px; border-radius: 14px; } .ds-calendar__yday[aria-pressed="true"] { background: var(--accent-16); color: var(--accent-text); font-weight: 700; } .ds-calendar__yday[data-state="none"] { color: var(--faint); } /* layout das páginas de módulo (1.79): colunas que quebram, pilhas horizontais e verticais, item que não estica */ .ds-page-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; margin-top: 20px; align-items: start; } .ds-page-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .ds-hstack { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; } .ds-hstack--tight { gap: 6px; } .ds-vstack { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ds-grow { flex: 1; min-width: 0; } .ds-self-start { align-self: flex-start; } .ds-hstack--top { align-items: flex-start; flex-wrap: nowrap; } .ds-page-narrow { max-width: 760px; margin-top: 20px; } .ds-hstack--end { justify-content: flex-end; } /* camada que fecha o popover ao clicar fora (fica logo abaixo do ds-pop) */ .ds-overlay-catch { position: fixed; inset: 0; z-index: calc(var(--z-card-menu) - 1); display: none; } .ds-overlay-catch[data-open="true"] { display: block; } /* dentro das telas de configuração (z 180): popover e camada de clicar fora sobem para a camada delas (1.80) */ .ds-pop--settings { z-index: var(--z-settings-popover); } .ds-overlay-catch--settings { z-index: calc(var(--z-settings-popover) - 1); } .ds-confirm--danger .ds-section-box__help { color: inherit; } .ds-root--embed { background: transparent; } /* Segmentado compacto com polegar (1.84): densidade de linhas e de cards, ordem das tasks; --pill para o “corridos/úteis” do PrazoPicker e a unidade da duração da reunião. Na linha ficam só as colunas da grade, a largura e o deslocamento do polegar (ou --n e --i). */ .ds-seg-compact { position: relative; isolation: isolate; display: inline-grid; grid-template-columns: repeat(var(--n, 2), 1fr); flex: none; padding: 2px; box-sizing: border-box; border-radius: var(--radius-item); border: 1px solid var(--border); } .ds-seg-compact__thumb { position: absolute; z-index: 0; top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px) / var(--n, 2)); border-radius: var(--radius-thumb); background: var(--hover); pointer-events: none; transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .3s cubic-bezier(.2,.9,.25,1.12), width .3s cubic-bezier(.2,.9,.25,1.12); } .ds-seg-compact > :not(.ds-seg-compact__thumb) { position: relative; z-index: 1; } .ds-seg-compact--pill { border: 0; border-radius: var(--radius-pill); background: var(--hover); } .ds-seg-compact--pill .ds-seg-compact__thumb { border-radius: var(--radius-pill); background: var(--menu); box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform .32s cubic-bezier(.2,.9,.25,1.12); } [data-theme="light"] .ds-seg-compact--pill .ds-seg-compact__thumb { box-shadow: 0 1px 3px rgba(0,0,0,.12); } /* 1.86: o conteúdo das abas fica por cima do polegar mesmo sem position no botão */ .ds-tabs > :not(.ds-tabs__thumb):not(.ds-glide):not([data-glide-bg]), .ds-seg-lg > :not(.ds-seg-lg__thumb):not(.ds-glide):not([data-glide-bg]) { position: relative; z-index: 1; } .ds-tabs { isolation: isolate; } /* fora do atendimento na grade (1.80): uma faixa por trecho — antes da abertura, pausas, entre janelas, depois do fechamento — e os bloqueios */ .ds-calendar__off { position:absolute; left:0; right:0; z-index:0; pointer-events:none; background:color-mix(in srgb,var(--muted) 7%,transparent); } .ds-calendar__off[data-kind="block"] { background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--muted) 12%,transparent) 0 6px,transparent 6px 12px); } /* linha que escolhe (a semana de Agendamentos) e horário ocupado na prévia (1.80) */ .ds-line-row--pick { width: 100%; box-sizing: border-box; font: inherit; color: var(--text); background: transparent; text-align: left; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .ds-line-row--pick:hover { background: var(--hover); } .ds-line-row--pick[aria-pressed="true"] { background: var(--accent-16); border-color: var(--accent-55); } .ds-line-row__date--wide { width: 72px; } .ds-radio-pill--busy, .ds-radio-pill--busy:hover { border-style: dashed; color: var(--faint); background: transparent; cursor: not-allowed; text-decoration: line-through; } .ds-tabs--page { max-width: 560px; margin-top: 18px; } .ds-seg--narrow { max-width: 320px; } /* Agendamentos · o dia (1.81, aprovado): linha do tempo com faixas nomeadas (a faixa ds-calendar__off ganha rótulo e tipos) */ .ds-dayline { display: grid; grid-template-columns: 44px minmax(0, 1fr); height: var(--dayline-h, 624px); } .ds-dayline__hours { position: relative; } .ds-dayline__hour { position: absolute; right: 8px; transform: translateY(-50%); font-size: var(--text-3xs); color: var(--faint); font-variant-numeric: tabular-nums; } .ds-dayline__col { position: relative; border-left: 1px solid var(--border); background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--hour-h, 48px) - 1px), var(--line) calc(var(--hour-h, 48px) - 1px) var(--hour-h, 48px)); } .ds-dayline .ds-calendar__off { left: 6px; right: 6px; border-radius: 8px; display: flex; align-items: flex-start; padding: 4px 8px; box-sizing: border-box; overflow: hidden; } .ds-calendar__off-label { font-size: var(--text-3xs); font-weight: 600; line-height: 1.3; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-calendar__off[data-kind="pause"] { background: color-mix(in srgb, var(--muted) 12%, transparent); } .ds-calendar__off[data-kind="free"] { background: var(--tone-green-bg); } .ds-calendar__off[data-kind="free"] .ds-calendar__off-label { color: var(--tone-green-fg); } .ds-calendar__off[data-kind="busy"] { background: var(--tone-red-bg); } .ds-calendar__off[data-kind="busy"] .ds-calendar__off-label { color: var(--tone-red-fg); } .ds-calendar__off[data-kind="past"] { background: transparent; border: 1px dashed var(--border); } .ds-calendar__off[data-kind="past"] .ds-calendar__off-label { color: var(--faint); font-weight: 500; } /* pílula com tom (exceções): o par bg/fg dos tons do Design System */ .ds-pill[data-tone="red"] { background: var(--tone-red-bg); color: var(--tone-red-fg); } .ds-pill[data-tone="orange"] { background: var(--tone-orange-bg); color: var(--tone-orange-fg); } .ds-pill[data-tone="green"] { background: var(--tone-green-bg); color: var(--tone-green-fg); } .ds-pill[data-tone="gray"] { background: var(--tone-gray-bg); color: var(--tone-gray-fg); } .ds-calendar__ygrid--lg .ds-calendar__yday { font-size: 13px; } .ds-legend--center { justify-content: center; } .ds-icon-btn--muted { opacity: .35; } .ds-vstack--min { min-width: 200px; } .ds-new-row--wrap { flex-wrap: wrap; height: auto; min-height: 46px; padding: 6px; gap: 6px; } .ds-new-row--wrap input { flex: 1 1 160px; height: 32px; } /* página de Agendamentos (1.82): cartões em colunas que se encaixam pela altura (grade estilo Pinterest) */ .ds-ag-masonry { columns: 3 320px; column-gap: 20px; margin-top: 20px; } .ds-ag-masonry > .ds-section-box { break-inside: avoid; margin-bottom: 20px; } /* mês pequeno com dias quadrados */ .ds-calendar__ygrid--lg { max-width: 420px; margin: 0 auto; width: 100%; gap: 4px; } .ds-calendar__ygrid--lg .ds-calendar__yday { height: auto; aspect-ratio: 1; } /* 1.87 · linha de estado (bolinha + texto, ex.: “Link ativo · criado há 2 dias”) e campo de endereço só leitura com Copiar */ .ds-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: 600; } .ds-status-line__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--muted); transition: background var(--duration-base) ease, box-shadow var(--duration-base) ease; } .ds-status-line[data-on="true"] .ds-status-line__dot { background: var(--tone-green-dot); box-shadow: 0 0 0 4px var(--tone-green-bg); } .ds-status-line__meta { font-weight: 400; font-size: var(--text-xs); color: var(--muted); } .ds-url-field { display: flex; align-items: center; gap: 6px; height: var(--control-xl); padding: 0 4px 0 12px; box-sizing: border-box; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--input-bg); color: var(--muted); } .ds-url-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-20); } .ds-url-field__input { font: inherit; flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--text); font-size: var(--text-sm); text-overflow: ellipsis; } .ds-page-narrow > .ds-section-box + .ds-section-box { margin-top: 20px; } /* caixas empilhadas numa página estreita */ /* 1.88 · selo vermelho de pendentes num item da barra lateral (Agendamentos, até “99+”); funciona também fora do .ds-root */ .ds-nav__badge { flex: none; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; display: inline-grid; place-items: center; background: var(--danger-solid, #C2414D); color: #FFFFFF; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; animation: ds-badge-in var(--duration-base, .25s) var(--ease-bounce, cubic-bezier(.22,1.28,.36,1)) both; } @keyframes ds-badge-in { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } } /* 1.88 · pedido pendente na grade da Agenda: tracejado no âmbar do Aguardando, sem arrastar */ .ds-calendar__event[data-kind="pending"], .ds-calendar__month-event[data-kind="pending"] { border: 1px dashed var(--event-color); border-left: 3px dashed var(--event-color); background: color-mix(in srgb, var(--event-color) 12%, var(--surface)); } .ds-calendar__event[data-kind="pending"]:hover, .ds-calendar__month-event[data-kind="pending"]:hover { background: color-mix(in srgb, var(--event-color) 20%, var(--surface)); } .ds-page-narrow--center { margin-left: auto; margin-right: auto; } /* coluna estreita no meio da página (Pedidos e Link e motivos, 1.89) */ /* 1.93 · texto secundário dentro do botão (Sincronizar com Google · última: há X) */ .ds-btn__meta { font-weight: 400; color: var(--muted); margin-left: 4px; white-space: nowrap; } /* 1.96 · peças que Clientes e Usuários montavam em linha (27 out 2026) */ /* célula da Listagem que abre um seletor (cargo, equipe, status, responsáveis, campos): 30px; em destaque enquanto o seletor dela está aberto */ .ds-list-cell { font: inherit; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 8px; margin: 0 -8px; width: calc(100% + 16px); box-sizing: border-box; min-width: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; transition: background .15s ease, box-shadow .15s ease; } .ds-list-cell[data-open="true"], .ds-list-cell[aria-expanded="true"] { background: var(--accent-16); box-shadow: inset 0 0 0 1px var(--accent-45); } [data-theme="light"] .ds-list-cell[data-open="true"], [data-theme="light"] .ds-list-cell[aria-expanded="true"] { background: var(--accent-12); } .ds-list-cell[aria-disabled="true"] { cursor: default; } .ds-list-cell--end { justify-content: flex-end; } /* rótulo de grupo dentro de um painel (Atrasadas, Próximos 7 dias, Hoje…) */ .ds-panel-group { display: flex; align-items: center; gap: 8px; padding: 12px 2px 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } .ds-panel-group--first { padding-top: 4px; } .ds-panel-group[data-today="true"] { color: var(--accent-text); } .ds-panel-group__count { font-weight: 600; letter-spacing: 0; color: var(--muted); } /* presença no canto do avatar: online (verde), ausente (laranja); offline não mostra */ .ds-presence { position: relative; display: inline-flex; flex: none; } .ds-presence > .ds-status-dot { position: absolute; right: -2px; bottom: -2px; box-shadow: 0 0 0 2px var(--ring, var(--page)); } .ds-presence[data-p="online"] > .ds-status-dot { background: var(--tone-green-dot); } .ds-presence[data-p="ausente"] > .ds-status-dot { background: var(--tone-orange-dot); } .ds-presence[data-p="offline"] > .ds-status-dot { display: none; } /* status de sessão (1.184): Ocupado, Não perturbe (vermelho com traço) e Invisível (anel, só quem é ou a Central vê) */ .ds-presence[data-p="ocupado"] > .ds-status-dot { background: var(--tone-red-dot); } .ds-presence[data-p="dnd"] > .ds-status-dot { background: linear-gradient(transparent 40%, #FFFFFF 40%, #FFFFFF 60%, transparent 60%) center / 60% 100% no-repeat, var(--tone-red-dot); } .ds-presence[data-p="invisivel"] > .ds-status-dot { background: var(--ring, var(--page)); box-shadow: inset 0 0 0 2px var(--muted), 0 0 0 2px var(--ring, var(--page)); } .ds-status-opt { display: flex; align-items: center; gap: 10px; } .ds-status-opt .ds-presence { width: 10px; height: 10px; } .ds-status-opt .ds-presence > .ds-status-dot { position: static; width: 10px; height: 10px; } .ds-status-opt .ds-presence[data-p="offline"] > .ds-status-dot { display: block; background: var(--faint); } /* Painel de cartões (1.114, 28 out 2026, aprovado pelo usuário para o Início): a grade dos Relatórios e das Métricas virou classe. .ds-painel é o contêiner (mede a largura); a grade tem 3 colunas e cai para 2 abaixo de 900px e 1 abaixo de 600px. O cartão ocupa 1/3, 2/3 ou a largura toda (data-span 1 | 2 | 3). 1.117 (29 out 2026): encaixe estilo Pinterest — linhas de 4px e cada cartão desce as linhas da altura dele (data-h baixo 280 | medio 440 | alto 640, mais os 12px do vão); com grid-auto-flow dense, um cartão mais baixo sobe para o buraco ao lado de um alto. */ .ds-painel { container-type: inline-size; margin-top: 20px; } .ds-painel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 4px; column-gap: 12px; row-gap: 0; grid-auto-flow: row dense; align-items: start; } .ds-painel-card[data-span="2"] { grid-column: span 2; } .ds-painel-card[data-span="3"] { grid-column: 1 / -1; } .ds-painel-card[data-h="baixo"] { --painel-h: 280px; grid-row: span 73; } .ds-painel-card[data-h="medio"] { --painel-h: 440px; grid-row: span 113; } .ds-painel-card[data-h="alto"] { --painel-h: 640px; grid-row: span 163; } @container (max-width: 900px) { .ds-painel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-painel-card[data-span="2"] { grid-column: 1 / -1; } } @container (max-width: 600px) { .ds-painel-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; row-gap: 12px; } .ds-painel-card[data-span], .ds-painel-card[data-h] { grid-column: auto; grid-row: auto; } } /* Organizar (o dos Relatórios): cartão tracejado, controles no cabeçalho e o encaixe do que está sendo arrastado */ .ds-painel-card[data-org="true"] { border-style: dashed; border-color: var(--dashed); } .ds-painel-card[data-drag="true"] { border: 1.5px dashed var(--accent-55); opacity: .35; } .ds-painel-card__org { display: flex; align-items: center; gap: 4px; flex: none; margin-left: auto; } .ds-painel-card[data-org="true"] .ds-painel-card__head { flex-wrap: wrap; row-gap: 6px; } .ds-painel-card[data-org="true"] .ds-painel-card__titles { min-width: 180px; } /* cartão estreito: os controles descem para a linha de baixo, como nos Relatórios */ .ds-painel-card__grip { width: 22px; height: 22px; flex: none; margin-left: -6px; border-radius: var(--radius-thumb); display: grid; place-items: center; color: var(--muted); cursor: grab; touch-action: none; } .ds-painel-card__grip:hover { background: var(--hover); color: var(--text); } /* filtros ativos do cartão: uma linha de ds-chip-x embaixo do cabeçalho */ .ds-painel-card__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: none; padding: 0 12px 8px 16px; } .ds-painel-card__chips .ds-chip-x { height: 26px; padding-left: 10px; } /* Cartão de painel: altura fixa (--painel-h; 440 nos principais, 360 nos menores), cabeçalho com título, contagem, lupa e o filtro do cartão, corpo que rola por dentro com rolagem infinita (o pé mostra “Mostrando N de M” e o carregando no acento). */ .ds-painel-card { display: flex; flex-direction: column; min-width: 0; height: var(--painel-h, 440px); box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); overflow: clip; } .ds-painel-card__head { display: flex; align-items: center; gap: 8px; flex: none; min-height: 58px; padding: 12px 12px 8px 16px; box-sizing: border-box; } .ds-painel-card__titles { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } .ds-painel-card__title { display: flex; align-items: baseline; gap: 6px; font-size: var(--text-sm); font-weight: 600; color: var(--text); white-space: nowrap; } .ds-painel-card__count { font-size: var(--text-xs); font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; } .ds-painel-card__sub { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* lupa: o botão de ícone vira o campo de busca ao clicar (largura 30 → 200px, .32s); Esc ou sair vazio fecha */ .ds-painel-card__search { display: flex; align-items: center; gap: 6px; flex: none; width: 30px; height: 30px; box-sizing: border-box; padding: 0; border-radius: var(--radius-item); border: 1px solid transparent; color: var(--muted); overflow: hidden; transition: width .32s var(--ease), border-color .2s ease, background .2s ease; } .ds-painel-card__search[data-open="true"] { width: 200px; padding: 0 8px 0 2px; border-color: var(--border); background: var(--page); } .ds-painel-card__search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; font-size: var(--text-xs); } .ds-painel-card__search[data-open="false"] input { width: 0; padding: 0; } .ds-painel-card__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 0 8px 8px; } .ds-painel-card__body::-webkit-scrollbar { display: none; } .ds-painel-card__more { display: flex; align-items: center; justify-content: center; gap: 8px; height: 36px; font-size: var(--text-xs); color: var(--faint); } .ds-painel-card__body .ds-empty { margin: 4px 8px; } /* Faixa do Organizar e bandeja dos ocultos (1.117): os valores do Organizar dos Relatórios e das Métricas, agora como classe. A faixa gruda no topo da área que rola; a bandeja fica no pé do painel com uma pílula “+ Nome” por cartão oculto. */ .ds-painel-orgbar { position: sticky; top: 10px; z-index: 40; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 10px 12px 10px 10px; margin: 16px 0 0; border-radius: var(--radius-xl); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); background: linear-gradient(color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 12%, transparent)), var(--page); box-shadow: 0 10px 24px rgba(0,0,0,.35); animation: ds-painel-in .34s var(--ease) both; } [data-theme="light"] .ds-painel-orgbar { background: linear-gradient(color-mix(in srgb, var(--accent) 7%, transparent), color-mix(in srgb, var(--accent) 7%, transparent)), var(--page); box-shadow: 0 10px 24px rgba(0,0,0,.08); } .ds-painel-orgbar__hint { flex: 1 1 260px; min-width: 0; font-size: var(--text-xs); color: var(--muted); } .ds-painel-ocultos { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-xl); border: 1px dashed var(--dashed); } .ds-painel-ocultos__label { margin-right: 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); } .ds-painel-ocultos__item { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .ds-painel-ocultos__item:hover { border-color: var(--border-hover); color: var(--text); } .ds-painel-ocultos__empty { font-size: var(--text-xs); color: var(--faint); } @keyframes ds-painel-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } } /* ===== Início › vistas (1.121, 29 out 2026, desenhos do usuário aprovados) ===== */ /* Linha de task em duas linhas: anel da coluna (não é caixa de concluir: só mostra o status), título e “● quadro · #id”; à direita a pílula do prazo (a do card) e a prioridade ou o status. A linha inteira abre a task. Hover deslizante (data-glide-item). */ .ds-task-linha { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; width: 100%; box-sizing: border-box; padding: 10px 8px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; position: relative; } .ds-task-linha + .ds-task-linha::before { content: ""; position: absolute; left: 34px; right: 8px; top: 0; border-top: 1px solid var(--line); } .ds-task-linha__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .ds-task-linha__title { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-task-linha__meta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--text-xs); color: var(--muted); white-space: nowrap; overflow: hidden; } .ds-task-linha__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; } .ds-task-linha__note { font-size: 11.5px; color: var(--muted); white-space: nowrap; } /* Bloco de destaque: número grande no acento, título, texto e um link à direita */ .ds-destaque { display: flex; align-items: center; gap: 16px; flex: none; padding: 16px 18px; border-radius: var(--radius-xl); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); } [data-theme="light"] .ds-destaque { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); } .ds-destaque__num { font-size: 28px; font-weight: 600; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--accent-text); } .ds-destaque__body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } .ds-destaque__title { font-size: var(--text-sm); font-weight: 600; color: var(--accent-text); } .ds-destaque__text { font-size: var(--text-xs); color: var(--muted); } /* Faixa da semana: Seg … Dom com o número do dia; o escolhido fica no acento, hoje ganha um ponto embaixo. Clicar escolhe o dia. */ .ds-semana { display: flex; gap: 2px; flex: none; } .ds-semana__dia { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 42px; padding: 7px 0 6px; box-sizing: border-box; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text); font: inherit; cursor: pointer; position: relative; transition: background .2s ease, color .2s ease; } .ds-semana__dow { font-size: 11px; color: var(--muted); } .ds-semana__num { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } .ds-semana__dia[aria-pressed="true"] { background: var(--accent-16); } .ds-semana__dia[aria-pressed="true"] .ds-semana__num, .ds-semana__dia[aria-pressed="true"] .ds-semana__dow { color: var(--accent-text); } .ds-semana__dia[data-hoje="true"]::after { content: ""; position: absolute; bottom: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } /* Linha do tempo do dia (agenda enxuta): hora à esquerda, blocos na cor do tipo, as folgas escritas e a linha do agora */ .ds-dia-linha { display: grid; grid-template-columns: 44px minmax(0, 1fr); } .ds-dia-linha__hora { padding-top: 10px; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; } .ds-dia-linha__item { display: flex; flex-direction: column; padding: 4px 0 14px 14px; border-left: 1px solid var(--line); min-width: 0; } .ds-dia-linha__bloco { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--c, var(--accent)) 18%, var(--surface)); min-width: 0; cursor: pointer; transition: box-shadow .2s ease, background .2s ease, transform .25s var(--ease); } .ds-dia-linha__bloco:hover { background: color-mix(in srgb, var(--c, var(--accent)) 26%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--accent)) 55%, transparent); } [data-theme="light"] .ds-dia-linha__bloco:hover { background: color-mix(in srgb, var(--c, var(--accent)) 18%, var(--surface)); } .ds-dia-linha__bloco:focus-visible { outline: none; box-shadow: var(--focus-ring-strong); } [data-theme="light"] .ds-dia-linha__bloco { background: color-mix(in srgb, var(--c, var(--accent)) 12%, var(--surface)); } .ds-dia-linha__titulo { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-dia-linha__meta { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--muted); } .ds-dia-linha__folga { display: flex; align-items: center; gap: 8px; padding-top: 8px; font-size: var(--text-xs); color: var(--muted); } .ds-dia-linha__agora { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; font-size: 11px; font-weight: 600; color: var(--accent-text); } .ds-dia-linha__agora::after { content: ""; flex: 1; height: 1px; background: var(--accent); } /* Linha de reunião: hora, título, “Online · 40 min” com ícone, avatares e Detalhes; --destaque para a próxima */ .ds-reuniao-linha { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: start; column-gap: 12px; padding: 10px; border-radius: var(--radius-lg); position: relative; } .ds-reuniao-linha + .ds-reuniao-linha::before { content: ""; position: absolute; left: 10px; right: 10px; top: 0; border-top: 1px solid var(--line); } .ds-reuniao-linha--destaque { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); } .ds-reuniao-linha[role="button"] { cursor: pointer; } .ds-reuniao-linha--destaque:hover { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); } .ds-reuniao-linha:focus-visible { outline: none; box-shadow: var(--focus-ring-strong); } [data-theme="light"] .ds-reuniao-linha--destaque { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); } .ds-reuniao-linha--destaque::before, .ds-reuniao-linha--destaque + .ds-reuniao-linha::before { display: none; } .ds-reuniao-linha__hora { padding-top: 1px; font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; } .ds-reuniao-linha__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ds-reuniao-linha__titulo { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ds-reuniao-linha__meta { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--muted); } .ds-reuniao-linha__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } /* Aviso: faixa no acento com ícone, título, texto e um link (o Aviso dos Relatórios virou classe) */ .ds-aviso { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 14px 16px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); animation: ds-painel-in .34s var(--ease) both; } [data-theme="light"] .ds-aviso { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); } .ds-aviso__icon { width: 30px; height: 30px; flex: none; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--accent-16); color: var(--accent-text); } .ds-aviso__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .ds-aviso__title { font-size: var(--text-sm); font-weight: 600; color: var(--text); } .ds-aviso__text { font-size: var(--text-xs); color: var(--muted); } /* Cartão de painel com seções empilhadas (Seu ritmo): cada seção separada por linha; rodapé do cartão com texto e link */ .ds-painel-card__secao { display: flex; flex-direction: column; gap: 6px; padding: 12px 8px; border-top: 1px solid var(--line); } .ds-painel-card__secao:first-child { border-top: 0; padding-top: 4px; } .ds-painel-card__foot { display: flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 0 12px 0 16px; border-top: 1px solid var(--line); font-size: var(--text-xs); color: var(--muted); } .ds-painel-card__foot > span { flex: 1; min-width: 0; } .ds-painel-card__metricas { display: flex; gap: 28px; padding: 4px 8px 12px; } .ds-painel-card__metrica { display: flex; flex-direction: column; gap: 2px; } .ds-painel-card__metrica b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .ds-painel-card__metrica span { font-size: var(--text-xs); color: var(--muted); } /* Tooltip dos gráficos (o dos Relatórios e das Métricas, como classe): segue o mouse sobre [data-ct]; primeira linha em negrito */ .ds-chart-tip { position: fixed; left: 0; top: 0; z-index: var(--z-rel-tip); pointer-events: none; max-width: 280px; display: flex; flex-direction: column; gap: 2px; padding: 8px 11px; border-radius: var(--radius-md); background: #FFFFFF; color: #1B1B1B; font-size: 12px; line-height: 1.4; box-shadow: 0 10px 24px rgba(0,0,0,.22); opacity: 0; transform: translateY(4px); transition: opacity .12s ease, transform .16s var(--ease); } [data-theme="light"] .ds-chart-tip { background: #1B1B1B; color: #FFFFFF; } .ds-chart-tip b { font-weight: 700; } .ds-chart-tip span { opacity: .82; white-space: pre-line; } /* ---------- Entrada (1.132, 29 out 2026): senha com olho, código de uso único e requisitos da senha ---------- */ /* Campo de senha: .ds-input com o .ds-icon-btn--plain do olho dentro, à direita (Mostrar / Esconder senha) */ .ds-password { position: relative; } .ds-password .ds-input { padding-right: 46px; } .ds-password .ds-icon-btn { position: absolute; right: 7px; top: 7px; } /* Código de uso único: 6 .ds-input de 52px em dois grupos de 3; dígito novo dá um pulinho; aria-busy enquanto confere */ .ds-otp { display: grid; grid-template-columns: 1fr 1fr 1fr 0 1fr 1fr 1fr; gap: 8px; } .ds-otp__cell:nth-child(4) { grid-column: 5; } .ds-otp__cell { height: 52px; padding: 0; text-align: center; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; caret-color: var(--accent); } .ds-otp__cell[data-cheio] { border-color: var(--border-hover); } .ds-otp__cell[data-pulo] { animation: ds-pulo .32s var(--ease-bounce); } @keyframes ds-pulo { 40% { transform: translateY(-3px) scale(1.06); } } .ds-otp[aria-busy="true"] .ds-otp__cell { opacity: .6; } .ds-otp-foot { display: flex; align-items: center; justify-content: space-between; margin-top: -4px; min-height: 22px; } .ds-otp-foot .ds-link { padding: 0 2px; margin-left: auto; } .ds-otp-foot .ds-link[disabled] { color: var(--faint); cursor: default; } .ds-otp-state { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--muted); opacity: 0; transition: opacity .2s ease; } .ds-otp[aria-busy="true"] ~ .ds-otp-foot .ds-otp-state { opacity: 1; } /* Requisitos da senha: o .ds-check redondo de 14px fica verde quando cumpre; data-falta pinta de vermelho ao tentar salvar */ .ds-reqs { display: flex; flex-direction: column; gap: 6px; margin-top: -6px; } .ds-req { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--muted); transition: color .2s ease; } .ds-req .ds-check { width: 14px; height: 14px; flex-basis: 14px; border-radius: 50%; } .ds-req[data-ok] { color: var(--text-2); } .ds-req[data-ok] .ds-check { background: var(--tone-green-dot); border-color: transparent; color: #1B1B1B; animation: ds-pulo .36s var(--ease-bounce); } .ds-req[data-ok] .ds-check svg { animation: ds-check-pop .4s ease-out; } .ds-req[data-falta] { color: var(--tone-red-fg); } .ds-req[data-falta] .ds-check { border-color: var(--tone-red-dot); } /* ---------- Busca global (⌘K) · app/busca.js (29 out 2026) ---------- Painel no centro, por cima de tudo (--z-busca), com o véu de blur forte (--overlay-busca + --overlay-blur, só aqui). Campo grande no topo, lista à esquerda (linhas do menu com hover deslizante) e prévia do item escolhido à direita; pé com os atalhos. Entra como o dialog (sobe e cresce) e as linhas em cascata; a prévia troca com fade. */ .ds-busca { position: fixed; inset: 0; z-index: var(--z-busca); display: none; justify-content: center; align-items: flex-start; padding: clamp(40px, 14vh, 150px) 16px 24px; box-sizing: border-box; font-family: var(--font-sans, 'Hanken Grotesk', system-ui, sans-serif); color: var(--text); background: var(--overlay-busca); backdrop-filter: blur(var(--overlay-blur)) saturate(1.3); -webkit-backdrop-filter: blur(var(--overlay-blur)) saturate(1.3); opacity: 0; transition: opacity .2s ease; } .ds-busca[data-open="true"] { opacity: 1; transition: opacity .26s ease; } .ds-busca__panel { width: min(780px, 100%); max-height: min(560px, calc(100vh - 80px)); display: flex; flex-direction: column; overflow: hidden; background: var(--dialog); border: 1px solid var(--border); border-radius: var(--radius-dialog); box-shadow: var(--shadow-dialog); transform: translateY(-10px) scale(.97); opacity: 0; transition: transform .2s var(--ease), opacity .16s ease; } .ds-busca[data-open="true"] .ds-busca__panel { transform: none; opacity: 1; transition: transform .38s var(--ease-dialog), opacity .22s ease; } .ds-busca__head { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--line); flex: none; color: var(--muted); } .ds-busca__input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; font-size: 17px; } .ds-busca__input::placeholder { color: var(--muted); } .ds-busca__body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; min-height: 0; flex: 1 1 auto; } .ds-busca__list { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 6px 8px 10px; min-height: 0; max-height: 420px; } .ds-busca__grp { position: sticky; top: -6px; z-index: 2; background: var(--dialog); padding: 12px 10px 6px; } .ds-busca__item { min-height: 42px; padding: 6px 10px; animation: ds-item-in .3s var(--ease) both; } .ds-busca__item[data-active="true"] { background: transparent; } .ds-busca__icon { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--hover); color: var(--text-2); } .ds-busca__icon svg { color: inherit; } .ds-busca__txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-busca__pai { color: var(--muted); } .ds-busca__hit { background: transparent; color: var(--text); font-weight: 700; } .ds-busca__mais { display: block; font-size: var(--text-xs); padding: 6px 10px 4px 48px; } .ds-busca__mais--fim { color: var(--muted); padding: 10px 10px 6px 48px; } .ds-busca__vazio { padding: 28px 18px; display: flex; flex-direction: column; gap: 6px; } .ds-busca__vazio-sub { font-size: var(--text-xs); color: var(--muted); line-height: 1.5; max-width: 340px; } .ds-busca__prev { border-left: 1px solid var(--line); padding: 20px 20px 18px; min-height: 0; overflow-y: auto; scrollbar-width: none; } .ds-busca__prev-in { display: flex; flex-direction: column; gap: 6px; animation: ds-busca-prev .24s var(--ease) both; } @keyframes ds-busca-prev { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .ds-busca__prev-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-lg); background: var(--accent-16); color: var(--accent-text); margin-bottom: 8px; } .ds-busca__prev-t { font-size: 16px; font-weight: 600; color: var(--text); } .ds-busca__prev-p { margin: 0; font-size: var(--text-sm); color: var(--text-2); line-height: 1.5; } .ds-busca__prev-lbl { padding: 12px 0 2px; } .ds-busca__prev-secs { display: flex; flex-direction: column; gap: 6px; } .ds-busca__prev-secs span { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--text-2); } .ds-busca__prev-secs svg { color: var(--muted); flex: none; } .ds-busca__prev-ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: var(--text-sm); color: var(--text-2); line-height: 1.45; } .ds-busca__prev-go { margin-top: 14px; font-size: var(--text-xs); color: var(--muted); display: flex; align-items: center; gap: 6px; } .ds-busca__foot { display: flex; align-items: center; gap: 16px; height: 40px; padding: 0 16px; border-top: 1px solid var(--line); flex: none; font-size: var(--text-xs); color: var(--muted); } .ds-busca__foot span { display: inline-flex; align-items: center; gap: 4px; } .ds-busca__foot-end { margin-left: auto; } [data-busca-pill], [data-busca-pill] input { cursor: pointer; } @media (max-width: 640px) { .ds-busca__body { grid-template-columns: 1fr; } .ds-busca__prev { display: none; } } /* parte 2 (dados): linha com segunda linha de contexto (como o item do Combobox com sub) e a prévia em linhas rótulo · valor */ .ds-busca__item--2 { min-height: 50px; } .ds-busca__item--2 .ds-busca__txt { display: flex; flex-direction: column; gap: 1px; } .ds-busca__item--2 .ds-busca__t { overflow: hidden; text-overflow: ellipsis; } .ds-busca__l2 { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-busca__kvs { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; } .ds-busca__kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 10px; font-size: var(--text-sm); } .ds-busca__kv > span:first-child { font-size: var(--text-xs); color: var(--muted); } .ds-busca__kv > span:last-child { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-wrap: wrap; } .ds-busca__pessoas { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .ds-busca__pessoas .ds-avatar + .ds-avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--dialog); } .ds-busca__mudo { color: var(--muted); font-size: var(--text-xs); } .ds-busca__prev-in > .ds-avatar { margin-bottom: 8px; } /* parte 3 (escopos): abas com a largura do texto (.ds-tabs--auto: o polegar é medido e posto pelo JS), chip do escopo no campo, “Ver todos (N)” como .ds-link e “Limpar” dos Recentes que aparece no hover do rótulo */ .ds-tabs--auto { display: flex; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .ds-tabs--auto .ds-tabs__thumb { width: 0; transform: none; transition: transform .38s cubic-bezier(.2,.9,.25,1.12), width .38s cubic-bezier(.2,.9,.25,1.12); } .ds-tabs--auto .ds-tabs__btn { flex: none; height: 30px; padding: 0 12px; font-size: var(--text-xs); } .ds-busca__abas-box { padding: 10px 16px 0 16px; flex: none; } .ds-busca__abas-box[hidden] { display: none; } .ds-busca__chip { flex: none; gap: 4px; padding: 0 4px 0 9px; font-weight: 600; color: var(--text); animation: ds-busca-chip .3s var(--ease-overshoot) both; } .ds-busca__chip[hidden] { display: none; } @keyframes ds-busca-chip { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } } .ds-busca__chip-x { width: 18px; height: 18px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: 14px; line-height: 1; } .ds-busca__chip-x:hover { background: var(--hover); color: var(--text); } .ds-busca__grp { display: flex; align-items: center; } .ds-busca__limpar { margin-left: auto; padding: 0 2px; font-size: var(--text-2xs); letter-spacing: 0; text-transform: none; opacity: 0; transition: opacity .15s ease; } .ds-busca__grp:hover .ds-busca__limpar, .ds-busca__limpar:focus-visible { opacity: 1; } .ds-busca__list[data-quieto] .ds-busca__item { animation: none; } .ds-busca__l2-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .ds-busca__l2 .ds-busca__hit { color: var(--text-2); } /* ---------- Céu do Horizonte (30 out 2026) · app/ceu.js (ArtCeu.montar) ---------- A peça da tela de entrada (entrar.html), usada também no onboarding de primeiro acesso. Sempre noturno (tema escuro). O contêiner dá a posição e o tamanho (fixed ou absolute); dentro: estrelas, cadentes, lua, planeta com anel e luas, astronauta e horizonte. */ .ds-ceu { overflow: hidden; pointer-events: none; background: var(--rail); } .ds-ceu > * { position: absolute; } .ds-ceu__sky { inset: 0; transition: transform 1.6s var(--ease), opacity .8s ease; } .ds-ceu__star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--text); opacity: 0; animation: ds-ceu-twinkle var(--d, 5s) ease-in-out var(--w, 0s) infinite; } .ds-ceu__star--b { width: 3px; height: 3px; box-shadow: 0 0 6px rgba(255,255,255,.5); } @keyframes ds-ceu-twinkle { 50% { opacity: var(--o, .5); } } .ds-ceu__shoot { position: absolute; width: 130px; height: 1.5px; border-radius: 2px; transform-origin: 100% 50%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.85)); } .ds-ceu__shoot::after { content: ''; position: absolute; right: -1px; top: -1.5px; width: 4px; height: 4px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 8px 2px rgba(183,166,240,.8); } /* planeta com anel (atrás e na frente do corpo) */ .ds-ceu__planet { right: 11%; top: 13%; width: 92px; height: 92px; animation: ds-ceu-float 9s ease-in-out infinite alternate; transition: transform 1.6s var(--ease); } /* corpo: faixas e manchas na inclinação do anel (-16°) que correm para o lado, como se girasse; a sombra fica por cima */ .ds-ceu__body { position: absolute; inset: 0; z-index: 1; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 32% 30%, #CFC2F7 0%, var(--accent) 38%, var(--primary) 62%, #2B1F55 100%); } .ds-ceu__spin { position: absolute; left: -30%; right: -30%; top: -30%; bottom: -30%; transform: rotate(-16deg); } .ds-ceu__spin::before, .ds-ceu__spin::after { content: ''; position: absolute; inset: 0; background-repeat: repeat-x; animation: ds-ceu-spin 18s linear infinite; } .ds-ceu__spin::before { opacity: .45; background-size: 120px 100%; background-image: linear-gradient(180deg, transparent 22%, rgba(255,255,255,.22) 22% 27%, transparent 27% 41%, rgba(43,31,85,.28) 41% 47%, transparent 47% 58%, rgba(255,255,255,.16) 58% 62%, transparent 62% 74%, rgba(43,31,85,.22) 74% 79%, transparent 79%), radial-gradient(ellipse 22px 6px at 30px 44%, rgba(255,255,255,.35), transparent 70%), radial-gradient(ellipse 14px 4px at 88px 66%, rgba(43,31,85,.4), transparent 70%); } .ds-ceu__spin::after { opacity: .5; background-size: 170px 100%; animation-duration: 26s; background-image: radial-gradient(ellipse 12px 5px at 60px 52%, rgba(43,31,85,.45), transparent 70%), radial-gradient(ellipse 8px 3px at 140px 36%, rgba(255,255,255,.4), transparent 70%); } @keyframes ds-ceu-spin { to { background-position-x: -120px, -120px, -120px; } } .ds-ceu__spin::after { animation-name: ds-ceu-spin2; } @keyframes ds-ceu-spin2 { to { background-position-x: -170px, -170px; } } .ds-ceu__shade { position: absolute; inset: 0; z-index: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.18), transparent 40%), radial-gradient(circle at 72% 74%, rgba(20,12,45,.55), transparent 62%); } .ds-ceu__ring { position: absolute; left: -38%; right: -38%; top: 40%; height: 20%; border-radius: 50%; border: 2px solid rgba(214,203,250,.7); transform: rotate(-16deg); } .ds-ceu__ring--back { z-index: 0; clip-path: inset(0 0 50% 0); opacity: .55; } .ds-ceu__ring--front { z-index: 2; clip-path: inset(50% 0 0 0); } /* luas em órbita inclinada como o anel: na metade da frente passam por cima do planeta, na de trás por baixo */ .ds-ceu__sat { position: absolute; left: 0; top: 0; z-index: 3; border-radius: 50%; offset-rotate: 0deg; animation: ds-ceu-orbita var(--t, 9s) linear var(--w, 0s) infinite; } .ds-ceu__sat--1 { width: 9px; height: 9px; background: radial-gradient(circle at 35% 35%, #FFFFFF, #BDBDB8 70%); box-shadow: 0 0 0 1px rgba(20,12,45,.35), 1px 2px 3px rgba(20,12,45,.4); offset-path: path('M 121 24.5 A 78 22 -16 0 1 -29 67.5 A 78 22 -16 0 1 121 24.5'); } .ds-ceu__sat--2 { width: 6px; height: 6px; box-shadow: 0 0 0 1px rgba(20,12,45,.3); background: radial-gradient(circle at 35% 35%, #CFE0F4, #72A2DA 75%); --t: 14s; --w: -5s; offset-path: path('M 108 25 A 64 30 -10 0 1 -16 67 A 64 30 -10 0 1 108 25'); } @keyframes ds-ceu-orbita { 0% { offset-distance: 0%; z-index: 3; } 49.9% { z-index: 3; } 50% { offset-distance: 50%; z-index: 0; } 99.9% { z-index: 0; } 100% { offset-distance: 100%; z-index: 0; } } .ds-ceu__moon { left: 16%; top: 22%; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #CFE0F4, #72A2DA 70%); opacity: .8; animation: ds-ceu-float 7s ease-in-out -3s infinite alternate; } @keyframes ds-ceu-float { to { transform: translateY(8px); } } /* astronauta: atravessa o céu devagar, girando */ .ds-ceu__astro { left: 0; top: 0; width: 44px; height: 44px; offset-path: path('M -60 520 C 260 300, 520 420, 820 180 S 1400 80, 1700 -60'); offset-rotate: 0deg; animation: ds-ceu-voo 70s linear -18s infinite; } .ds-ceu__astro svg { display: block; animation: ds-ceu-gira 14s ease-in-out infinite alternate; } @keyframes ds-ceu-voo { from { offset-distance: 0%; } to { offset-distance: 100%; } } @keyframes ds-ceu-gira { from { transform: rotate(-24deg); } to { transform: rotate(28deg) translateY(4px); } } /* horizonte */ .ds-ceu__horizon { left: -20%; right: -20%; top: 66%; height: 140vh; border-radius: 50% 50% 0 0 / 160px 160px 0 0; background: var(--page); box-shadow: 0 -1px 0 var(--accent-55), 0 -30px 80px -10px var(--accent-30), 0 -120px 220px -40px var(--accent-20); animation: ds-ceu-rise 1.6s var(--ease) both; transition: top 1.5s cubic-bezier(.7,0,.2,1), border-radius 1.5s cubic-bezier(.7,0,.2,1); } .ds-ceu__horizon::before { content: ''; position: absolute; left: 50%; top: -1px; width: 46%; height: 2px; transform: translateX(-50%); border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent-text), transparent); filter: blur(.4px); } @keyframes ds-ceu-rise { from { transform: translateY(60px); opacity: 0; } } /* pousar: o horizonte sobe e vira o fundo do sistema (a chegada) */ .ds-ceu[data-pousar] .ds-ceu__horizon { top: -10%; border-radius: 0; } .ds-ceu[data-pousar] .ds-ceu__sky { transform: translateY(-30vh); opacity: 0; } .ds-ceu[data-pousar] .ds-ceu__planet { transform: translateY(-40vh) scale(.8); } .ds-ceu[data-pousar] .ds-ceu__astro, .ds-ceu[data-pousar] .ds-ceu__moon { opacity: 0; transition: opacity .5s ease; } @media (max-width: 560px) { .ds-ceu__planet { right: 10%; top: 6%; zoom: .7; } } @media (prefers-reduced-motion: reduce) { .ds-ceu__star, .ds-ceu__astro, .ds-ceu__astro svg, .ds-ceu__planet, .ds-ceu__moon, .ds-ceu__spin::before, .ds-ceu__spin::after, .ds-ceu__sat { animation: none !important; } .ds-ceu__astro { display: none; } } /* ---------- Tour com destaque (30 out 2026) · app/tour.js (ArtTour) ---------- A tela escurece e um “furo” iluminado (box-shadow gigante) desliza de parada em parada; o balão fica ao lado, sem cobrir o alvo. Usado no fim do onboarding (“Mostrar onde fica cada coisa”) e no menu do avatar › Ajuda. */ .ds-tour { position: fixed; inset: 0; z-index: var(--z-tour, 560); pointer-events: auto; } .ds-tour__hole { position: fixed; border-radius: 14px; box-shadow: 0 0 0 200vmax rgba(10,10,10,.62), 0 0 0 2px var(--accent-55), 0 0 28px 4px var(--accent-30); transition: left .5s var(--ease), top .5s var(--ease), width .5s var(--ease), height .5s var(--ease), opacity .3s ease; pointer-events: none; } [data-theme="light"] .ds-tour__hole { box-shadow: 0 0 0 200vmax rgba(27,27,27,.42), 0 0 0 2px var(--accent-55), 0 0 28px 4px var(--accent-20); } .ds-tour__tip { position: fixed; width: 300px; box-sizing: border-box; padding: 16px 16px 12px; border-radius: var(--radius-2xl); background: var(--dialog); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-dialog); font-family: var(--font-sans, 'Hanken Grotesk', system-ui, sans-serif); transition: left .5s var(--ease), top .5s var(--ease); animation: ds-tour-in .4s var(--ease-dialog, cubic-bezier(.2,.9,.25,1.06)) both; } @keyframes ds-tour-in { from { opacity: 0; transform: translateY(8px) scale(.97); } } .ds-tour__step { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); } .ds-tour__title { margin-top: 4px; font-size: 15px; font-weight: 600; } .ds-tour__text { margin-top: 4px; font-size: var(--text-sm); line-height: 1.5; color: var(--text-2); } .ds-tour__foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; } .ds-tour__dots { display: flex; gap: 5px; margin-right: auto; } .ds-tour__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--border-hover, var(--border)); transition: width .3s var(--ease), background .3s ease; } .ds-tour__dots i[data-on] { width: 16px; border-radius: 3px; background: var(--accent); } @media (prefers-reduced-motion: reduce) { .ds-tour__hole, .ds-tour__tip { transition: none; animation: none; } } /* ---------- Índice lateral de seções (.ds-toc) · 1.148 ---------- Coluna de navegação de uma página longa: rótulo, itens numerados, item atual marcado (aria-current) e hover deslizante (data-glide no nav, data-glide-item nos itens). Clique leva até a seção; ao rolar, o item acompanha (scrollspy na tela). Nasceu no editor de Rotas de API (1.14) e virou peça: Rotas de API e Termos e privacidade. */ .ds-toc { display: flex; flex-direction: column; gap: 2px; padding: 24px 14px; box-sizing: border-box; border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: none; } .ds-toc__label { padding: 0 10px 8px; font-size: var(--text-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .ds-toc__item { font: inherit; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 6px 10px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-2); font-size: var(--text-sm); font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; transition: background .2s ease, color .2s ease; } .ds-toc__item > span:not(.ds-toc__num):not(.ds-toc__soon) { flex: 1; min-width: 0; } .ds-toc__item[aria-current="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); font-weight: 600; } [data-theme="light"] .ds-toc__item[aria-current="true"] { background: color-mix(in srgb, var(--accent) 8%, transparent); } .ds-toc__item[data-soon] { color: var(--muted); } .ds-toc__num { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: var(--radius-thumb); background: var(--hover); color: var(--muted); font-size: var(--text-2xs); font-weight: 700; transition: background .2s ease, color .2s ease; } .ds-toc__item[aria-current="true"] .ds-toc__num { background: var(--accent); color: #FFFFFF; } .ds-toc__soon { flex: none; font-size: var(--text-3xs); color: var(--muted); } /* ---------- Texto corrido (.ds-prose) · 1.148 ---------- Leitura longa (Termos e privacidade; depois a Documentação): seções com título numerado, “Em resumo” (.ds-callout), parágrafos 14/1.55, subtítulos, listas com a bolinha do acento (a das listas do Módulo em redesenho) e tabela simples. Coluna de leitura: dentro de .ds-page-narrow. Só tokens; os dois temas vêm deles. */ .ds-prose { font-size: var(--text-body); line-height: var(--leading-relaxed); color: var(--text-2); } .ds-prose section { scroll-margin-top: 24px; } .ds-prose section + section { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); } .ds-prose h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: var(--text-h3); font-weight: 600; line-height: var(--leading-tight); letter-spacing: -.005em; color: var(--text); } .ds-prose__num { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: var(--radius-item); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); font-size: var(--text-sm); font-weight: 700; } .ds-prose h3 { margin: 22px 0 8px; font-size: var(--text-title); font-weight: 600; line-height: var(--leading-tight); color: var(--text); } .ds-prose p { margin: 0 0 12px; } .ds-prose b { font-weight: 600; color: var(--text); } .ds-prose a { color: var(--accent-text); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .ds-prose ul { margin: 0 0 14px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; } .ds-prose li { position: relative; padding-left: 16px; } .ds-prose li::before { content: ""; position: absolute; left: 0; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .ds-prose__resumo { flex-wrap: nowrap; align-items: flex-start; flex-direction: column; gap: 2px; margin: 0 0 16px; line-height: var(--leading-normal); color: var(--text); } .ds-prose__resumo b { font-size: var(--text-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); } .ds-prose__table { margin: 4px 0 16px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); scrollbar-width: none; } .ds-prose__table:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .ds-prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: var(--leading-normal); } .ds-prose th, .ds-prose td { padding: 10px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); } .ds-prose thead th { border-top: 0; background: var(--surface); font-size: var(--text-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .ds-prose tbody th { font-weight: 600; color: var(--text); } .ds-prose td { color: var(--text-2); } /* ========================================================================== Carta estelar (páginas de erro, 31 out 2026, 1.163): erro.html + app/erro.js (ArtErro). A página mostra onde a pessoa se perdeu: a rota sai da URL, a nave para no trecho que falhou e as estações são as saídas. Casos: 404 (setor fora do mapa), 403 (fora da sua órbita), 500 (sinal perdido) e 503 (estação em reparos). Escuro: espaço; claro: carta em papel. ========================================================================== */ .ds-carta { position: relative; min-height: 100vh; overflow: hidden; background-color: var(--carta-bg); color: var(--text); font-family: var(--font-sans); background-image: linear-gradient(var(--carta-grid) 1px, transparent 1px), linear-gradient(90deg, var(--carta-grid) 1px, transparent 1px); background-size: 48px 48px; } .ds-carta__stage { position: relative; min-height: 100vh; } .ds-carta__sky { position: absolute; inset: -12px; pointer-events: none; transition: transform 1.4s var(--ease); } .ds-carta__star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--carta-star); opacity: var(--o, .5); animation: dsCartaTw var(--tw, 5s) ease-in-out var(--w, 0s) infinite alternate; } .ds-carta__star--b { width: 3px; height: 3px; box-shadow: 0 0 6px var(--carta-star); } [data-theme="light"] .ds-carta__star--b { box-shadow: none; } .ds-carta__map { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; } .ds-carta__layer { position: absolute; inset: 0; pointer-events: none; } .ds-carta__layer > * { pointer-events: auto; } /* rotas */ .ds-carta__band { fill: none; stroke: var(--carta-band); stroke-linecap: round; animation: dsCartaFade 1.6s ease both; } .ds-carta__line { fill: none; stroke: var(--carta-route); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; } .ds-carta__line--alt { stroke: var(--carta-alt); } .ds-carta__line--trail { stroke: var(--carta-trail); stroke-width: 5; } .ds-carta__line--off { stroke: var(--carta-off); } .ds-carta__line--draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: dsCartaDraw var(--t, .9s) var(--ease) var(--d, 0s) both; } .ds-carta__line--dots { stroke: var(--muted); stroke-width: 4.5; stroke-dasharray: 0 13; animation: dsCartaFade .5s ease var(--d, 0s) both; } .ds-carta__line--static { stroke: var(--color-red); stroke-width: 6; stroke-dasharray: 12 9; stroke-linecap: butt; animation: dsCartaFade .4s ease var(--d, 0s) both, dsCartaFlow 1.4s linear infinite, dsCartaFlicker 2.6s steps(1) infinite; } .ds-carta__line--hazard { stroke: var(--color-amber); stroke-width: 8; stroke-linecap: butt; animation: dsCartaFade .5s ease var(--d, 0s) both; } .ds-carta__line--stripes { stroke: var(--carta-bg); stroke-width: 8.5; stroke-dasharray: 7 7; stroke-linecap: butt; animation: dsCartaFade .5s ease var(--d, 0s) both, dsCartaFlow 2.4s linear infinite; } .ds-carta__leg { stroke: var(--carta-ink); stroke-width: 2; opacity: .5; animation: dsCartaFade .5s ease var(--d, 0s) both; } /* estações (planetas) */ .ds-carta__node > circle { transform-box: fill-box; transform-origin: center; } .ds-carta__dot { fill: var(--carta-bg); stroke: var(--carta-ink); stroke-width: 3.5; animation: dsCartaPop .55s var(--ease-overshoot) var(--d, 0s) backwards; transition: transform .3s var(--ease-overshoot); } .ds-carta__halo { fill: none; stroke: var(--carta-route); stroke-width: 2; opacity: 0; transform: scale(.55); transition: opacity .25s ease, transform .35s var(--ease-overshoot); } .ds-carta__node--alt .ds-carta__halo { stroke: var(--carta-alt); } .ds-carta__node.is-hot .ds-carta__dot { transform: scale(1.22); } .ds-carta__node.is-hot .ds-carta__halo { opacity: .55; transform: scale(1); } .ds-carta__node--small .ds-carta__dot { stroke: var(--carta-trail); stroke-width: 3; } .ds-carta__node--off .ds-carta__dot { stroke: var(--carta-off); } .ds-carta__node--warn .ds-carta__dot { fill: var(--color-red); stroke: var(--carta-bg); stroke-width: 3; } .ds-carta__ghost { fill: none; stroke: var(--muted); stroke-width: 2.5; stroke-dasharray: 3.5 4.5; transform-box: fill-box; transform-origin: center; animation: dsCartaFade .5s ease var(--d, 0s) both, dsCartaSpin 14s linear infinite; } .ds-carta__shield { fill: var(--carta-shield); stroke: var(--carta-route); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: dsCartaFade .6s ease var(--d, 0s) both, dsCartaSpin 26s linear infinite; } .ds-carta__shield-pulse { fill: none; stroke: var(--carta-route); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; opacity: 0; animation: dsCartaRing 3.2s var(--ease-glow) var(--d, 0s) infinite; } .ds-carta__glyph { fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: dsCartaFade .5s ease var(--d, 0s) both; } .ds-carta__glyph--on { stroke: #FFFFFF; stroke-width: 2.2; } /* a nave (você está aqui) */ .ds-carta__ship { position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--carta-ink); color: var(--carta-bg); display: grid; place-items: center; offset-anchor: 50% 50%; offset-rotate: auto; box-shadow: 0 0 0 5px color-mix(in srgb, var(--carta-ink) 12%, transparent); pointer-events: none; z-index: 2; } .ds-carta__ship svg { position: relative; } .ds-carta__ship.is-parada { translate: -50% -50%; } .ds-carta__ship.is-voando { animation: dsCartaVoo var(--t, 1.3s) var(--ease) var(--d, 0s) both; } .ds-carta__ship > i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--carta-ink); opacity: 0; animation: dsCartaPulse 2.4s var(--ease-glow) var(--p, 0s) infinite; } .ds-carta__ship > i + i { animation-delay: calc(var(--p, 0s) + 1.2s); } .ds-carta__tip { position: absolute; translate: -50% 0; padding: 5px 9px; border-radius: 8px; background: var(--carta-ink); color: var(--carta-bg); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; animation: dsCartaStop .45s var(--ease-overshoot) var(--d, 0s) backwards; pointer-events: none; } .ds-carta__tip--up { translate: -50% -100%; } .ds-carta__tip--left { translate: -100% -50%; } /* paradas (saídas) e etiquetas */ .ds-carta__stop { position: absolute; translate: -50% 0; text-decoration: none; animation: dsCartaStop .5s var(--ease-overshoot) var(--d, 0s) backwards; } .ds-carta__stop--up { translate: -50% -100%; } .ds-carta__stop .ds-carta__arrow { display: inline-flex; margin-left: -2px; opacity: .6; transition: transform .3s var(--ease-overshoot), opacity .2s ease; } .ds-carta__stop:hover .ds-carta__arrow { transform: translateX(2px); opacity: 1; } .ds-carta__stop.ds-btn--outline { box-shadow: 0 6px 16px -10px rgba(0,0,0,.35); } .ds-carta__tag { position: absolute; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 12px; border-radius: var(--radius-lg); white-space: nowrap; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--muted); font-size: 11.5px; line-height: 1.3; pointer-events: none; animation: dsCartaStop .5s var(--ease-overshoot) var(--d, 0s) backwards; } .ds-carta__tag b { color: var(--text-2); font-size: var(--text-sm); font-weight: 600; } .ds-carta__tag--up { translate: -50% -100%; } .ds-carta__tag--ghost { border-style: dashed; border-color: var(--border-hover); background: transparent; } .ds-carta__tag--ghost b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; text-decoration: line-through; text-decoration-color: var(--muted); color: var(--muted); } .ds-carta__tag--small { padding: 0; border: 0; background: transparent; } .ds-carta__tag--small b { font-size: var(--text-xs); color: var(--muted); font-weight: 500; } /* cartão de telemetria (500) e painel da missão (503) */ .ds-carta__card { position: absolute; translate: -50% 0; width: 248px; box-sizing: border-box; padding: 14px 16px; border-radius: var(--radius-xl); background: var(--dialog); border: 1px solid var(--border); box-shadow: 0 18px 40px -22px rgba(0,0,0,.45); animation: dsCartaStop .55s var(--ease-overshoot) var(--d, 0s) backwards; } .ds-carta__card .ds-overline { color: var(--tone-red-fg); } .ds-carta__code { margin: 6px 0 2px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; font-weight: 700; letter-spacing: .02em; } .ds-carta__card p { margin: 0 0 12px; font-size: var(--text-xs); color: var(--muted); } .ds-carta__panel { position: absolute; width: 320px; box-sizing: border-box; padding: 16px 18px 14px; border-radius: var(--radius-2xl); background: var(--carta-panel); color: #FFFFFF; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 24px 50px -24px rgba(0,0,0,.6); animation: dsCartaStop .6s var(--ease-overshoot) var(--d, 0s) backwards; } .ds-carta__panel-top { display: flex; justify-content: space-between; font-size: var(--text-2xs); font-weight: 700; letter-spacing: var(--tracking-overline); text-transform: uppercase; color: rgba(255,255,255,.5); } .ds-carta__panel-what { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: var(--text-sm); color: rgba(255,255,255,.82); } .ds-carta__panel-big { margin-top: 2px; font-size: 26px; font-weight: 700; letter-spacing: -.02em; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .ds-carta__panel-big span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 600; color: var(--color-amber); letter-spacing: 0; font-variant-numeric: tabular-nums; } .ds-carta__bar { position: relative; height: 5px; margin: 12px 0 7px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; } .ds-carta__bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: #F2EFE6; transition: width 1s linear; } .ds-carta__bar-legend { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; } /* texto, marca e legenda */ .ds-carta__brand { position: absolute; left: 28px; top: 26px; display: flex; align-items: center; gap: 10px; line-height: 1.25; animation: dsCartaFade .6s ease both; } .ds-carta__brand b { display: block; font-size: var(--text-sm); font-weight: 600; } .ds-carta__brand span { font-size: var(--text-xs); color: var(--muted); } .ds-carta__logo { width: 36px; height: 36px; flex: none; border-radius: var(--radius-md); display: grid; place-items: center; color: #FFFFFF; font-weight: 700; font-size: 16px; background: linear-gradient(145deg, var(--accent), var(--primary)); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); } .ds-carta__copy { position: absolute; left: clamp(20px, 9.5vw, 140px); right: 20px; top: clamp(92px, 17vh, 170px); max-width: 480px; animation: dsCartaStop .7s var(--ease) .05s backwards; } .ds-carta__badge { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--muted); } .ds-carta__badge b { padding: 3px 8px; border-radius: 6px; background: var(--carta-ink); color: var(--carta-bg); font-size: var(--text-xs); font-weight: 700; letter-spacing: .02em; } .ds-carta__title { margin: 18px 0 16px; font-size: clamp(34px, 4vw, 46px); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; } .ds-carta__body { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); text-wrap: pretty; } .ds-carta__body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; color: var(--text); background: var(--hover); padding: 1px 6px; border-radius: 6px; word-break: break-all; } .ds-carta__body b, .ds-carta__hint b { color: var(--text-2); font-weight: 600; } .ds-carta__hint { margin: 14px 0 0; font-size: var(--text-sm); color: var(--muted); } .ds-carta__foot { position: absolute; left: 28px; right: 28px; bottom: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; pointer-events: none; animation: dsCartaFade .8s ease .6s both; } .ds-carta__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-size: var(--text-xs); color: var(--muted); } .ds-carta__legend span { display: inline-flex; align-items: center; gap: 8px; } .ds-carta__by { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); font-size: var(--text-2xs); font-weight: 700; letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--muted); } @media (max-width: 759px) { .ds-carta__brand { left: 20px; top: 20px; } .ds-carta__copy { top: 84px; } .ds-carta__title { font-size: 32px; } .ds-carta__body { font-size: 15px; } .ds-carta__foot { left: 20px; right: 20px; bottom: 16px; } .ds-carta__by { display: none; } .ds-carta__panel { width: auto; } } @keyframes dsCartaTw { to { opacity: calc(var(--o, .5) * .2); } } @keyframes dsCartaFade { from { opacity: 0; } } @keyframes dsCartaDraw { 0% { opacity: 0; } 6% { opacity: 1; } 100% { opacity: 1; stroke-dashoffset: 0; } } @keyframes dsCartaPop { 0% { transform: scale(0); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } } @keyframes dsCartaStop { from { opacity: 0; transform: translateY(6px); } } @keyframes dsCartaVoo { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 100% { offset-distance: 100%; opacity: 1; } } @keyframes dsCartaPulse { 0% { opacity: .5; transform: scale(1); } 100% { opacity: 0; transform: scale(2.5); } } @keyframes dsCartaRing { 0% { opacity: .5; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.35); } } @keyframes dsCartaSpin { to { transform: rotate(360deg); } } @keyframes dsCartaFlow { to { stroke-dashoffset: -42; } } @keyframes dsCartaFlicker { 0%, 100% { opacity: 1; } 47% { opacity: .45; } 50% { opacity: .9; } 53% { opacity: .35; } 56% { opacity: 1; } } /* redesenho ao mudar o tamanho da janela, e quem pede menos movimento: tudo já no lugar final */ .ds-carta--quieto * { --d: -30s !important; } @media (prefers-reduced-motion: reduce) { .ds-carta *, .ds-carta *::before { animation: none !important; transition: none !important; } .ds-carta .ds-carta__line--draw { stroke-dashoffset: 0; } } /* ---------- Carta estelar · variantes sorteadas (2 nov 2026, 1.164): A orbital, B cabine, C lançamento (app/erro-variantes.js) ---------- */ .ds-carta--ceu { z-index: 1; background: transparent; } .ds-carta--ceu .ds-carta__sky { display: none; } .ds-carta__tip--right { translate: 0 -50%; } /* A · sistema orbital */ .ds-carta__orbit { fill: none; stroke: var(--carta-off); stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: dsCartaFade .8s ease var(--d, 0s) both, dsCartaSpin 90s linear infinite; } .ds-carta__body { transform-box: fill-box; transform-origin: center; animation: dsCartaPop .6s var(--ease-overshoot) var(--d, 0s) backwards; transition: transform .3s var(--ease-overshoot); } .ds-carta__node.is-hot .ds-carta__body { transform: scale(1.14); } .ds-carta__ring { fill: none; stroke-width: 2.2; opacity: .85; } .ds-carta__sun { fill: var(--carta-ink); } .ds-carta__sun-ring { fill: none; stroke: var(--carta-ink); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; opacity: 0; animation: dsCartaRing 3.2s var(--ease-glow) 1s infinite; } .ds-carta__line--viagem { stroke-width: 4.5; } /* B · cabine */ .ds-carta__radar { position: absolute; border-radius: 50%; overflow: hidden; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--carta-alt) 9%, transparent), transparent 72%); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--carta-alt) 45%, transparent); animation: dsCartaFade .8s ease var(--d, 0s) both; } .ds-carta__sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg 290deg, color-mix(in srgb, var(--carta-alt) 34%, transparent) 360deg); animation: dsCartaSpin 4.5s linear infinite; } .ds-carta__ring-r { fill: none; stroke: color-mix(in srgb, var(--carta-alt) 28%, transparent); stroke-width: 1; } .ds-carta__cross { stroke: color-mix(in srgb, var(--carta-alt) 20%, transparent); stroke-width: 1; } .ds-carta__deg { position: absolute; translate: -50% -50%; font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); letter-spacing: .04em; animation: dsCartaFade .6s ease var(--d, 0s) both; } .ds-carta__bearing { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; animation: dsCartaFade .5s ease var(--d, 0s) both, dsCartaFlow 2.4s linear infinite; } .ds-carta__blip { fill: var(--carta-alt); } .ds-carta__ping { fill: none; stroke: var(--carta-alt); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; opacity: 0; animation: dsCartaPing 4.5s var(--ease-glow) var(--p, 0s) infinite; } @keyframes dsCartaPing { 0% { opacity: .7; transform: scale(1); } 40%, 100% { opacity: 0; transform: scale(3.4); } } .ds-carta__log { position: absolute; box-sizing: border-box; padding: 12px 16px 14px; border-radius: var(--radius-xl); border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 55%, transparent); font: 12.5px/1.8 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); animation: dsCartaStop .5s var(--ease) var(--d, 0s) backwards; } .ds-carta__log-head { display: flex; justify-content: space-between; margin-bottom: 4px; font-family: var(--font-sans); font-size: var(--text-2xs); font-weight: 700; letter-spacing: var(--tracking-overline); text-transform: uppercase; } .ds-carta__log-line { white-space: pre-wrap; } .ds-carta__log b { color: var(--text-2); font-weight: 600; } .ds-carta__log .ok { color: var(--tone-green-fg); } .ds-carta__log .x { color: var(--tone-red-fg); font-weight: 600; } .ds-carta__caret { display: inline-block; width: 7px; height: 14px; vertical-align: -2px; background: var(--muted); animation: dsCartaBlink 1s steps(1) infinite; } @keyframes dsCartaBlink { 50% { opacity: 0; } } /* C · lançamento */ .ds-carta__ground { fill: color-mix(in srgb, var(--carta-ink) 4%, transparent); stroke: var(--carta-off); stroke-width: 2; animation: dsCartaFade .8s ease both; } .ds-carta__tower { fill: none; stroke: var(--carta-ink); stroke-width: 2; stroke-linecap: round; opacity: .5; animation: dsCartaFade .8s ease .2s both; } .ds-carta__piece { position: absolute; width: 12px; height: 18px; margin: -9px 0 0 -6px; border-radius: 3px 3px 5px 5px; background: var(--carta-ink); opacity: 0; pointer-events: none; animation: dsCartaCai 1.6s var(--ease-remove) var(--d, 0s) forwards; } @keyframes dsCartaCai { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(-40px, 170px) rotate(-220deg); } } /* centro do A: estação Grand Line (anel com raios e painéis) e planeta-sede */ .ds-carta__anel { fill: none; stroke: var(--carta-ink); stroke-width: 3.2; } .ds-carta__raio { stroke: var(--carta-ink); stroke-width: 1.4; opacity: .55; } .ds-carta__miolo { fill: var(--carta-ink); } .ds-carta__haste { stroke: var(--carta-ink); stroke-width: 2; } .ds-carta__painel { fill: var(--carta-bg); stroke: var(--carta-ink); stroke-width: 1.6; } .ds-carta__painel-linha { stroke: var(--carta-ink); stroke-width: .9; opacity: .5; } .ds-carta__roda { transform-box: fill-box; transform-origin: center; animation: dsCartaSpin 26s linear infinite; } .ds-carta__hub--il .ds-carta__anel { stroke: #C6CBD8; } .ds-carta__hub--il .ds-carta__raio { stroke: #9AA2B4; opacity: .9; } .ds-carta__hub--il .ds-carta__miolo { fill: #EEF0F5; stroke: #8E97AA; stroke-width: 1; } .ds-carta__hub--il .ds-carta__haste { stroke: #9AA2B4; } .ds-carta__hub--il .ds-carta__painel { fill: #4D6FC6; stroke: #91B0F2; stroke-width: 1.2; } .ds-carta__hub--il .ds-carta__painel-linha { stroke: #A9C1F5; opacity: .7; } .ds-carta__faixa { fill: none; stroke: var(--carta-ink); stroke-width: 1.4; opacity: .25; stroke-linecap: round; } .ds-carta__hub--il .ds-carta__faixa { stroke: #FFFFFF; opacity: .22; stroke-width: 3; } .ds-carta__atmos { fill: none; stroke: var(--color-indigo); stroke-width: 4; opacity: .28; } .ds-carta__orbita-baixa { fill: none; stroke: var(--carta-ink); stroke-width: 1; stroke-dasharray: 2 5; opacity: .3; } .ds-carta__gira { animation: dsCartaSpin 16s linear infinite; } /* peças dos casos nas variantes */ .ds-carta__grupo { position: absolute; display: flex; gap: 8px; animation: dsCartaStop .5s var(--ease-overshoot) var(--d, 0s) backwards; } .ds-carta__grupo--col { flex-direction: column; align-items: stretch; } .ds-carta__grupo .ds-btn { text-decoration: none; } .ds-carta__node--dim { opacity: .38; } .ds-carta__obra { fill: none; stroke: var(--color-amber); stroke-width: 2.5; stroke-dasharray: 6 6; transform-box: fill-box; transform-origin: center; animation: dsCartaFade .6s ease var(--d, 0s) both, dsCartaSpin 20s linear infinite; } .ds-carta__espera { fill: none; stroke: var(--color-amber); stroke-width: 1.5; stroke-dasharray: 3 7; stroke-linecap: round; opacity: .7; animation: dsCartaFade .6s ease var(--d, 0s) both; } .ds-carta__zona { fill: url(#cv-hachura); stroke: var(--carta-route); stroke-width: 1.5; stroke-dasharray: 4 5; animation: dsCartaFade .6s ease var(--d, 0s) both; } .ds-carta__radar--falha .ds-carta__sweep { animation: dsCartaSpin 4.5s linear infinite, dsCartaFlicker 1.4s steps(1) infinite; } .ds-carta__radar--falha::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-red) 12%, transparent) 0 2px, transparent 2px 5px); animation: dsCartaChiado .3s steps(2) infinite; } @keyframes dsCartaChiado { 50% { transform: translateY(2px); } } .ds-carta__radar--espera .ds-carta__sweep { display: none; } .ds-carta__trilho-prog { fill: none; stroke: var(--carta-off); stroke-width: 3; } .ds-carta__progresso { fill: none; stroke: var(--color-amber); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 1s linear; } .ds-carta__t { position: absolute; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; animation: dsCartaFade .6s ease var(--d, 0s) both; } .ds-carta__t b { font: 700 24px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--color-amber); font-variant-numeric: tabular-nums; } .ds-carta__t span { font-size: var(--text-xs); color: var(--muted); } .ds-carta__sortear { pointer-events: auto; margin-left: auto; text-decoration: none; } .ds-carta__sortear .ds-proto-seal { margin-left: 4px; } @media (max-width: 759px) { .ds-carta__sortear { display: none; } } /* Salto pela dobra (2 nov 2026, app/salto.js): saída de dentro do sistema para a página de erro e a chegada nela */ .ds-salto { position: fixed; inset: 0; z-index: 2147482000; pointer-events: none; overflow: hidden; } .ds-salto i { position: absolute; left: 50%; top: 50%; width: var(--l, 120px); height: 2px; margin-top: -1px; border-radius: 2px; transform-origin: 0 50%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.95)); opacity: 0; } .ds-salto--sai { background: radial-gradient(circle at 50% 50%, rgba(8,8,12,0) 0, rgba(8,8,12,.85) 70%); animation: dsSaltoEscurece .9s ease forwards; } .ds-salto--sai i { animation: dsSaltoRisco .78s cubic-bezier(.5,0,.75,0) var(--atraso, 0s) forwards; } @keyframes dsSaltoEscurece { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 1; background-color: #08080C; } } @keyframes dsSaltoRisco { 0% { opacity: 0; transform: rotate(var(--a)) translateX(14px) scaleX(.05); } 25% { opacity: 1; } 100% { opacity: 1; transform: rotate(var(--a)) translateX(62vmax) scaleX(1.7); } } .ds-salto--chega { background: #08080C; animation: dsSaltoClareia .9s ease .25s forwards; } .ds-salto--chega i { animation: dsSaltoVolta .75s cubic-bezier(.2,.9,.3,1) var(--atraso, 0s) both; } @keyframes dsSaltoClareia { to { opacity: 0; } } @keyframes dsSaltoVolta { 0% { opacity: 1; transform: rotate(var(--a)) translateX(58vmax) scaleX(1.7); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r, 40px)) scaleX(.03); } } .ds-salto-miolo { transition: transform .85s cubic-bezier(.5,0,.75,0), filter .85s ease, opacity .85s ease !important; transform: scale(.86) !important; filter: blur(6px); opacity: .25; } @media (prefers-reduced-motion: reduce) { .ds-salto i { display: none; } .ds-salto--sai { animation: dsCartaFade .2s ease reverse both; background: #08080C; } .ds-salto-miolo { transform: none !important; filter: none; } } /* ========================================================================== Central de ajuda (2 nov 2026, 1.174): menu do avatar › Documentação (prototipo/Ajuda.dc.html, app/ajuda.js). Peças aprovadas pelo usuário: tipografia de artigo (.ds-artigo, sobre o .ds-prose), selo de papel (.ds-pill--papel, a pílula neutra do quadro com o ícone de pessoa), moldura do print (.ds-print), índice do artigo (.ds-toc--artigo, à direita com hover deslizante) e a grade de leitura (.ds-leitura: coluna de 720px + índice de 220px; variante A). ========================================================================== */ .ds-leitura { display: grid; grid-template-columns: minmax(0, 720px) 220px; gap: 48px; justify-content: center; align-items: start; } @media (max-width: 1180px) { .ds-leitura { grid-template-columns: minmax(0, 720px); } .ds-leitura > .ds-toc--artigo { display: none; } } .ds-toc--artigo { position: sticky; top: 0; gap: 0; padding: 2px 0 2px 14px; border-right: 0; border-left: 1px solid var(--line); max-height: calc(100vh - 220px); } .ds-toc--artigo .ds-toc__item { min-height: 32px; font-size: var(--text-xs); } .ds-artigo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 24px; font-size: var(--text-xs); color: var(--muted); } .ds-pill--papel { gap: 5px; padding: 0 9px 0 7px; } .ds-pill--papel svg { flex: none; color: var(--muted); } .ds-artigo h3 { margin: 30px 0 10px; scroll-margin-top: 12px; } .ds-artigo > h3:first-child { margin-top: 0; } .ds-artigo h4 { margin: 18px 0 6px; font-size: var(--text-body); font-weight: 600; color: var(--text); } .ds-artigo li > ul, .ds-artigo li > ol { margin: 8px 0 2px; } .ds-artigo ol { margin: 0 0 14px; padding: 0; list-style: none; counter-reset: ds-passo; display: flex; flex-direction: column; gap: 8px; } .ds-artigo ol > li { padding-left: 30px; counter-increment: ds-passo; } .ds-artigo ol > li::before { content: counter(ds-passo); top: 1px; width: 20px; height: 20px; border-radius: var(--radius-thumb); display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); font-size: var(--text-2xs); font-weight: 700; line-height: 1; } .ds-artigo code { padding: 1px 6px; border-radius: var(--radius-xs); background: var(--hover); color: var(--text); font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; } .ds-artigo blockquote { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--accent); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--surface); color: var(--text-2); } .ds-artigo h3[data-chegou] { animation: ds-artigo-chegou 1.4s var(--ease); } @keyframes ds-artigo-chegou { 0%, 40% { color: var(--accent-text); } 100% { color: var(--text); } } .ds-print { margin: 6px 0 22px; } .ds-print img { display: none; width: 100%; height: auto; box-sizing: border-box; border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--surface); } .ds-print--ok img { display: block; animation: ds-print-in .4s var(--ease); } .ds-print__vazio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 16 / 7; box-sizing: border-box; border: 1.5px dashed var(--dashed); border-radius: var(--radius-xl); background: var(--surface); color: var(--faint); font-size: var(--text-xs); font-weight: 600; } .ds-print--ok .ds-print__vazio { display: none; } .ds-print figcaption { margin-top: 8px; font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--muted); text-align: center; } @keyframes ds-print-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* ========================================================================== Visualizador de imagem (2 nov 2026, 1.175): ampliar os prints dos artigos da Central de ajuda (app/ajuda.js › ArtAjuda.ampliar). No print: cursor de lupa e o botão Ampliar no canto, que aparece no hover. Ampliado: o fundo é o do dialog (.ds-overlay), a imagem até 92% da tela cresce do lugar dela (FLIP), legenda embaixo, setas e contador com mais de um print, segmentado Escuro · Claro (.ds-tabs) quando o print existe nos dois temas; fecha com Esc, ✕ ou clique fora. ========================================================================== */ .ds-print { position: relative; } .ds-print--ok img { cursor: zoom-in; } .ds-print__ampliar { position: absolute; top: 10px; right: 10px; display: none; opacity: 0; transform: scale(.9); transition: opacity .18s ease, transform .22s var(--ease); background: var(--menu); box-shadow: var(--shadow-menu); } .ds-print--ok .ds-print__ampliar { display: grid; } .ds-print:hover .ds-print__ampliar, .ds-print__ampliar:focus-visible { opacity: 1; transform: none; } .ds-visualizador { z-index: var(--z-module-dialog); align-items: center; justify-content: center; padding: 0; overflow: hidden; } .ds-visualizador__palco { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 92vw; pointer-events: none; } .ds-visualizador__img { display: block; max-width: 92vw; max-height: calc(100vh - 150px); width: auto; height: auto; border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-dialog); transform-origin: top left; pointer-events: auto; } .ds-visualizador__legenda { max-width: 720px; font-size: var(--text-sm); line-height: var(--leading-normal); color: #FFFFFF; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.5); transition: opacity .2s ease; pointer-events: auto; } .ds-visualizador__topo { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; align-items: center; gap: 10px; justify-content: flex-end; transition: opacity .2s ease; } .ds-visualizador__conta { margin-right: auto; padding: 0 12px; height: 30px; display: inline-flex; align-items: center; border-radius: var(--radius-pill); background: var(--menu); color: var(--text); font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: var(--shadow-menu); } .ds-visualizador__topo .ds-tabs { background: var(--menu); box-shadow: var(--shadow-menu); } .ds-visualizador__topo .ds-tabs__btn { height: 28px; padding: 0 14px; font-size: var(--text-xs); } .ds-visualizador__seta { position: absolute; top: 50%; margin-top: -21px; background: var(--menu); color: var(--text); box-shadow: var(--shadow-menu); transition: opacity .2s ease, background .2s ease; } .ds-visualizador__seta--ant { left: 16px; } .ds-visualizador__seta--prox { right: 16px; } .ds-visualizador__seta[disabled] { opacity: .35; cursor: default; } .ds-visualizador__fecha { background: var(--menu); color: var(--text); box-shadow: var(--shadow-menu); } .ds-visualizador[data-saindo] .ds-visualizador__topo, .ds-visualizador[data-saindo] .ds-visualizador__seta, .ds-visualizador[data-saindo] .ds-visualizador__legenda { opacity: 0; } /* ========================================================================== Chat interno (3 nov 2026): coluna aberta pela sidebar e dock no pé da tela. Componente: prototipo/Chat.dc.html · dados: app/chat.js · doc: Design System/componentes/29-chat.md ========================================================================== */ @keyframes ds-chat-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes ds-chat-msg { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .ds-chat-col { --chat-col-w: clamp(440px, calc(100vw - 820px), 720px); flex: none; width: 0; height: 100%; overflow: clip; background: var(--panel); border-right: 1px solid transparent; transition: width .45s var(--ease), border-color .3s ease; } .ds-chat-col[data-open="true"] { width: var(--chat-col-w); border-right-color: var(--line); } .ds-chat-col[data-sobre="true"] { --chat-col-w: min(720px, calc(100vw - var(--chat-left, 0px) - 24px)); position: absolute; top: 0; bottom: 0; left: var(--chat-left, 0px); z-index: var(--z-chat-col); height: auto; box-shadow: 24px 0 60px rgba(0,0,0,.18); } .ds-chat-scrim { position: fixed; top: 0; right: 0; bottom: 0; left: var(--chat-left, 0px); z-index: calc(var(--z-chat-col) - 1); background: rgba(10,10,10,.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; cursor: pointer; } .ds-chat-scrim[data-open="true"] { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; } .ds-chat-col__in { width: var(--chat-col-w); height: 100%; display: flex; } .ds-chat-list { width: clamp(220px, 42%, 300px); flex: none; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); } .ds-chat-list__head { display: flex; flex-direction: column; gap: 10px; padding: 16px 12px 10px 16px; flex: none; } .ds-chat-list__title { flex: 1; font-size: 20px; font-weight: 600; letter-spacing: -.01em; } .ds-chat-list__scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 8px 12px; } .ds-chat-grp { display: block; padding: 12px 8px 4px; } .ds-chat-row { font: inherit; width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: var(--radius-lg); background: transparent; color: var(--text); text-align: left; cursor: pointer; } .ds-chat-row[aria-current="true"] { background: var(--accent-12); box-shadow: inset 3px 0 0 var(--accent); } .ds-chat-row__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ds-chat-row__l1 { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--text-sm); font-weight: 600; } .ds-chat-row__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-chat-row__time { margin-left: auto; flex: none; font-size: 11.5px; color: var(--faint); } .ds-chat-row__l2 { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--text-xs); color: var(--muted); } .ds-chat-row__prev { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-chat-row[data-unread="true"] .ds-chat-row__name { font-weight: 700; } .ds-chat-row[data-unread="true"] .ds-chat-row__prev { color: var(--text); } .ds-chat-row[data-unread="true"] .ds-chat-row__time { color: var(--accent-text); font-weight: 600; } .ds-chat-conv { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; } .ds-chat-conv .ds-chat-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; } .ds-chat-body { overflow-x: hidden; } .ds-chat-body .ds-msg:hover, .ds-chat-body .ds-msg:focus-within, .ds-chat-body .ds-msg:has(.ds-msg-bar[data-open="true"]) { z-index: 8; } .ds-chat-conv__foot { flex: none; padding: 0 12px 12px; } .ds-chat-conv__foot textarea { font: inherit; font-size: var(--text-sm); } .ds-chat-conv .ds-chat-head__title { flex: 0 0 auto; max-width: 45%; } .ds-chat-conv .ds-chat-head__who { min-width: 70px; flex: 0 1 auto; } .ds-chat-conv .ds-chat-head .ds-seal { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; } .ds-chat-sys { align-self: center; font-size: 11.5px; color: var(--faint); padding: 2px 10px; border-radius: var(--radius-pill); background: var(--hover); } .ds-chat-body .ds-msg { animation: ds-chat-msg .28s var(--ease) both; } .ds-chat-dock { position: fixed; right: 20px; bottom: 0; z-index: var(--z-chat-dock); display: flex; align-items: flex-end; gap: 12px; pointer-events: none; } .ds-chat-dock > * { pointer-events: auto; } .ds-chat-dock { transition: opacity .25s ease, transform .3s var(--ease); } .ds-chat-dock[data-hide="true"] { opacity: 0; transform: translateY(16px); } .ds-chat-dock[data-hide="true"] > * { pointer-events: none; } .ds-chat-win { width: 328px; height: 440px; display: flex; flex-direction: column; overflow: hidden; background: var(--dialog); border: 1px solid var(--border); border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.18); transition: height .38s var(--ease); animation: ds-chat-in .4s var(--ease-bounce) both; } .ds-chat-win[data-min="true"] { height: 48px; } .ds-chat-win .ds-chat-head { height: 48px; cursor: pointer; flex: none; } .ds-chat-win[data-pin="true"] .ds-chat-head { box-shadow: inset 0 2px 0 var(--accent); } .ds-chat-bubbles { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; } .ds-chat-bubble { position: relative; width: 44px; height: 44px; border: 0; padding: 0; border-radius: 50%; cursor: pointer; background: transparent; animation: ds-chat-in .35s var(--ease-bounce) both; } .ds-chat-bubble .ds-avatar { width: 44px; height: 44px; flex-basis: 44px; font-size: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.2); } .ds-chat-bubble .ds-unread { position: absolute; top: -4px; right: -4px; box-shadow: 0 0 0 2px var(--page); } /* Chat interno, etapa 2 (3 nov 2026): a mensagem. Os valores são os dos comentários internos da task (TaskSheet, cm*), que ainda montam o mesmo desenho com estilo próprio (ver inconsistencias.md). */ .ds-chat-body .ds-msg { position: relative; } .ds-chat-body .ds-msg__col { position: relative; } .ds-msg-bar { position: absolute; top: -14px; right: 0; z-index: 6; display: flex; gap: 1px; padding: 3px; border-radius: var(--radius-md); background: var(--menu); border: 1px solid var(--border); box-shadow: 0 8px 20px rgba(0,0,0,.1); opacity: 0; transform: translateY(4px) scale(.96); pointer-events: none; transition: opacity .15s ease, transform .22s cubic-bezier(.2,.9,.25,1.06); } [data-theme="dark"] .ds-msg-bar { box-shadow: 0 8px 20px rgba(0,0,0,.4); } .ds-msg--right .ds-msg-bar { right: auto; left: 0; } .ds-msg:hover .ds-msg-bar, .ds-msg:focus-within .ds-msg-bar, .ds-msg-bar[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; } .ds-msg-bar__btn { font: inherit; width: 28px; height: 28px; border-radius: var(--radius-sm); border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--text-2); } .ds-msg-bar__btn:hover { background: var(--hover); color: var(--text); } .ds-react-row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .ds-react { font: inherit; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: var(--radius-pill); cursor: pointer; font-size: 12px; font-weight: 700; border: 1px solid var(--border); background: transparent; color: var(--text-2); transition: background .2s ease, border-color .2s ease; } .ds-react[aria-pressed="true"] { border-color: var(--accent-55); background: var(--accent-16); color: var(--accent-text); } [data-theme="light"] .ds-react[aria-pressed="true"] { background: rgba(140,114,219,.1); } .ds-react-add { font: inherit; width: 26px; height: 26px; border-radius: var(--radius-pill); border: 1px dashed var(--border); background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; } .ds-emoji-pop { flex-direction: row; gap: 2px; padding: 6px; } .ds-emoji-pop__btn { font: inherit; width: 28px; height: 32px; border: 0; border-radius: var(--radius-sm); cursor: pointer; font-size: 18px; line-height: 1; display: grid; place-items: center; background: transparent; } .ds-emoji-pop__btn:hover { background: var(--hover); } .ds-emoji-pop__btn[aria-pressed="true"] { background: rgba(140,114,219,.18); } .ds-quote--msg { font: inherit; gap: 1px; align-self: stretch; min-width: 0; max-width: 100%; box-sizing: border-box; text-align: left; padding: 6px 10px; border: 0; border-left: 3px solid rgba(140,114,219,.6); border-radius: 4px 8px 8px 4px; cursor: pointer; color: inherit; font-size: 12px; line-height: 1.45; } .ds-quote--msg b { font-size: 11px; color: var(--accent-text); } .ds-quote--msg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); } .ds-chat-body .ds-bubble { min-width: 0; max-width: 100%; box-sizing: border-box; } .ds-chat-body .ds-central-seal { flex: none; white-space: nowrap; } .ds-msg-fwd { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); } .ds-msg-edited { color: var(--faint); } .ds-msg-files { display: flex; flex-direction: column; gap: 4px; min-width: 240px; margin: 0 -6px; } .ds-msg-imgs { display: flex; flex-wrap: wrap; gap: 6px; } .ds-msg-imgs .ds-print { margin: 0; width: 180px; } .ds-bubble[data-hit="true"] { box-shadow: 0 0 0 2px rgba(226,194,91,.7); } @keyframes ds-msg-glow { 0% { box-shadow: 0 0 0 0 var(--accent-55); } 100% { box-shadow: 0 0 0 10px transparent; } } .ds-bubble[data-glow="true"] { animation: ds-msg-glow .9s var(--ease); } .ds-chat-attach { display: flex; flex-wrap: wrap; gap: 6px; } .ds-chat-attach__item { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 4px 0 10px; border-radius: var(--radius-item); border: 1px solid var(--border); background: var(--surface); font-size: 12px; font-weight: 600; max-width: 220px; } .ds-chat-attach__item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-chat-drop { position: absolute; inset: 8px; z-index: 5; justify-content: center; } .ds-chat-panel { position: absolute; inset: 52px 0 0 0; z-index: 4; display: flex; flex-direction: column; background: var(--panel); animation: ds-chat-msg .25s var(--ease) both; } /* Chat interno, etapa 5 (3 nov 2026): chamados do Suporte no chat. A nota interna tem o tom amarelo da nota das Conversas do quadro. */ .ds-bubble--note { background: rgba(226,194,91,.1); border-color: rgba(226,194,91,.5); border-style: dashed; } .ds-chat-sup { margin: 10px 16px 0; flex: none; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); overflow: hidden; } .ds-chat-sup__head { font: inherit; width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; background: transparent; color: var(--text); cursor: pointer; text-align: left; font-size: var(--text-xs); } .ds-chat-sup__body { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; padding: 2px 12px 12px; font-size: var(--text-xs); } .ds-chat-sup__body > span:nth-child(odd) { color: var(--muted); } /* Chat interno, etapa 6 (3 nov 2026): mensagem urgente. A tela inteira fica desfocada, menos um furo no ícone Chat da sidebar (máscara radial em --hx/--hy) com o anel do tour; o cartão no centro só sai com Responder ou Li e entendi. */ @keyframes ds-urgente-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ds-urgente-anel { 0%, 100% { box-shadow: 0 0 0 2px var(--accent-55), 0 0 18px 2px var(--accent-30); } 50% { box-shadow: 0 0 0 2px var(--accent-55), 0 0 30px 8px var(--accent-30); } } .ds-urgente { position: fixed; inset: 0; z-index: var(--z-urgente); display: grid; place-items: center; padding: 20px; background: rgba(10,10,10,.42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); -webkit-mask-image: radial-gradient(circle 38px at var(--hx, -100px) var(--hy, -100px), transparent 97%, #000 100%); mask-image: radial-gradient(circle 38px at var(--hx, -100px) var(--hy, -100px), transparent 97%, #000 100%); animation: ds-urgente-in .3s ease both; } .ds-urgente__alvo { position: fixed; z-index: calc(var(--z-urgente) + 1); width: 66px; height: 62px; border-radius: 14px; pointer-events: none; transform: translate(-50%, -50%); animation: ds-urgente-anel 1.6s ease-in-out infinite; } .ds-urgente .ds-dialog { transform: none; opacity: 1; animation: ds-chat-in .4s var(--ease-bounce) both; } .ds-urgente__selo { display: inline-flex; align-items: center; gap: 6px; } .ds-msg-urg { display: flex; align-items: center; gap: 6px; } /* ---------- Entrada (1.195): o cartão da entrar.html virou classe para a Entrada do portal (PortalEntrada) ---------- .ds-entrada (página, fundo --page, cartão no centro) › .ds-entrada__card (420px, raio 22, --dialog) › .ds-entrada__marca (logo 46px na cor --accent + nome e overline) › .ds-entrada__vista (cada vista entra deslizando; data-de="left" volta) › .ds-entrada__head (título e texto), .ds-entrada__row (rótulo + link), .ds-entrada__go (botão principal 44px com a seta que anda) e .ds-entrada__pe (rodapé). */ .ds-entrada { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; box-sizing: border-box; background: var(--page); color: var(--text); } .ds-entrada__card { position: relative; width: 100%; max-width: 420px; padding: 32px 32px 26px; box-sizing: border-box; border-radius: 22px; background: var(--dialog); border: 1px solid var(--border); box-shadow: 0 40px 90px -30px rgba(0,0,0,.45); animation: ds-entrada-in .8s var(--ease) .1s both; } @keyframes ds-entrada-in { from { opacity: 0; transform: translateY(16px) scale(.985); } } .ds-entrada__marca { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; } .ds-entrada__logo { width: 46px; height: 46px; flex: none; border-radius: var(--radius-2xl); display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-size: 16px; font-weight: 700; letter-spacing: -.01em; box-shadow: 0 8px 20px -8px var(--accent-55); } .ds-entrada__nome { font-size: var(--text-h3); font-weight: 600; letter-spacing: -.005em; line-height: 1.2; } .ds-entrada__marca .ds-overline { display: block; margin-top: 2px; } .ds-entrada__vista { display: flex; flex-direction: column; gap: 18px; animation: ds-entrada-vista .45s var(--ease) both; } .ds-entrada__vista[data-de="left"] { animation-name: ds-entrada-volta; } @keyframes ds-entrada-vista { from { opacity: 0; transform: translateX(28px); } } @keyframes ds-entrada-volta { from { opacity: 0; transform: translateX(-28px); } } .ds-entrada__head .ds-h2 { font-size: 24px; letter-spacing: -.015em; margin: 0; } .ds-entrada__head p { margin: 8px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; } .ds-entrada__head b { color: var(--text-2); font-weight: 600; } .ds-entrada__row { display: flex; align-items: center; justify-content: space-between; } .ds-entrada__go { width: 100%; height: var(--control-2xl); margin-top: 4px; } .ds-entrada__go svg { transition: transform .35s var(--ease-overshoot); } .ds-entrada__go:hover svg { transform: translateX(3px); } .ds-entrada__go[aria-busy="true"] svg { display: none; } .ds-entrada__go .ds-spinner { display: none; } .ds-entrada__go[aria-busy="true"] .ds-spinner { display: inline-block; } .ds-entrada__voltar { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; margin-bottom: -4px; } .ds-entrada__voltar svg { transition: transform .3s var(--ease-overshoot); } .ds-entrada__voltar:hover svg { transform: translateX(-3px); } .ds-entrada__pe { margin-top: 22px; font-size: var(--text-xs); color: var(--faint); text-align: center; } /* chegada: a marca grande, o nome e a barra que enche (o cartão some) */ .ds-entrada__chegada { display: flex; flex-direction: column; align-items: center; text-align: center; } .ds-entrada__chegada > * { animation: ds-entrada-sobe .5s var(--ease) both; } .ds-entrada__chegada > :nth-child(2) { animation-delay: .12s; } .ds-entrada__chegada > :nth-child(3) { animation-delay: .2s; } .ds-entrada__chegada > :nth-child(4) { animation-delay: .28s; } .ds-entrada__chegada > :nth-child(5) { animation-delay: .34s; } @keyframes ds-entrada-sobe { from { opacity: 0; transform: translateY(10px) scale(.96); } } .ds-entrada__co { width: 96px; height: 96px; border-radius: 28px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-size: 34px; font-weight: 700; letter-spacing: -.02em; box-shadow: 0 24px 50px -18px var(--accent-55); } .ds-entrada__chegada .ds-overline { margin-top: 26px; } .ds-entrada__co-nome { margin-top: 6px; font-size: 26px; font-weight: 600; letter-spacing: -.02em; } .ds-entrada__oi { margin-top: 6px; font-size: var(--text-sm); color: var(--muted); } .ds-entrada__barra { margin-top: 24px; width: 160px; height: 3px; border-radius: 3px; background: var(--hover); overflow: hidden; } .ds-entrada__barra i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: 0 50%; animation: ds-entrada-barra 1.6s var(--ease) .3s both; } @keyframes ds-entrada-barra { from { transform: scaleX(0); } } @media (prefers-reduced-motion: reduce) { .ds-entrada__card, .ds-entrada__vista, .ds-entrada__chegada > *, .ds-entrada__barra i { animation: none; } } /* ---------- Cenas da Entrada do portal (1.196): .ds-cena + app/cena.js (ArtCena.montar(el, cena)) ---------- O fundo espacial da Entrada do portal, na cor primária da empresa (--accent). Cenas: --ponte (horizonte com grade em perspectiva, sempre escura), --janela (painel com planeta, órbitas e nave à esquerda; o cartão vai para a direita), --orbita (órbitas e nebulosa; claro e escuro), --liso (só --page). Quem usa: um contêiner fixo (position absolute, inset 0) sem filhos do template. */ .ds-cena { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: var(--page); } .ds-cena > * { position: absolute; } .ds-cena__estrela { width: 2px; height: 2px; border-radius: 50%; background: #FFFFFF; opacity: var(--o); animation: ds-cena-pisca var(--d) ease-in-out var(--w) infinite; } .ds-cena__estrela--b { width: 3px; height: 3px; } @keyframes ds-cena-pisca { 0%, 100% { opacity: var(--o); } 50% { opacity: .08; } } @keyframes ds-cena-gira { to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes ds-cena-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes ds-cena-nave { 0% { transform: translate(-20vw, 12vh) rotate(-12deg); opacity: 0; } 8%, 92% { opacity: 1; } 100% { transform: translate(70vw, -30vh) rotate(-12deg); opacity: 0; } } /* Ponte */ .ds-cena--ponte { background: linear-gradient(180deg, #07070A 0%, #0F0F14 55%, #16161C 100%); } .ds-cena__luz { left: 50%; top: 58%; width: 900px; height: 900px; margin-left: -450px; border-radius: 50%; background: radial-gradient(circle at 50% 0%, var(--accent-55), transparent 45%); filter: blur(10px); opacity: .7; } .ds-cena__grade { left: -20%; right: -20%; bottom: 0; height: 42%; transform: perspective(500px) rotateX(62deg); transform-origin: 50% 100%; background-image: linear-gradient(var(--accent-30) 1px, transparent 1px), linear-gradient(90deg, var(--accent-30) 1px, transparent 1px); background-size: 60px 60px; -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent); } .ds-cena__horizonte { left: 0; right: 0; top: 58%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 24px var(--accent); } /* Órbita */ .ds-cena--orbita { background: radial-gradient(60% 50% at 50% 50%, var(--accent-16), transparent 70%), radial-gradient(40% 40% at 85% 15%, rgba(92,196,186,.12), transparent 70%), var(--page); } [data-theme="light"] .ds-cena--orbita .ds-cena__estrela { background: var(--accent); } .ds-cena__orbita { left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(255,255,255,.10); transform: translate(-50%, -50%); animation: ds-cena-gira var(--d) linear infinite; } [data-theme="light"] .ds-cena__orbita { border-color: rgba(0,0,0,.08); } .ds-cena__orbita--tracejada { border-style: dashed; } .ds-cena__orbita--volta { animation-direction: reverse; } .ds-cena__lua { position: absolute; left: 50%; border-radius: 50%; background: var(--c); box-shadow: 0 0 14px var(--c); } /* Janela */ .ds-cena--janela { display: grid; grid-template-columns: 1.15fr 1fr; } .ds-cena__painel { position: relative; overflow: hidden; margin: 16px; border-radius: 28px; color: #F2F2EF; background: radial-gradient(120% 90% at 70% 110%, var(--accent-30), transparent 60%), radial-gradient(80% 60% at 10% 0%, rgba(92,196,186,.18), transparent 60%), #0E0D14; } .ds-cena__painel > * { position: absolute; } .ds-cena__planeta { left: 50%; top: 52%; width: 300px; height: 300px; margin: -150px 0 0 -150px; animation: ds-cena-flutua 9s ease-in-out infinite; } .ds-cena__planeta::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.55), transparent 28%), linear-gradient(150deg, var(--accent), #14121C 82%); box-shadow: inset -40px -30px 80px rgba(0,0,0,.55), 0 0 120px var(--accent-30); } .ds-cena__planeta::after { content: ''; position: absolute; left: -90px; right: -90px; top: 50%; height: 90px; margin-top: -45px; border-radius: 50%; border: 3px solid var(--accent-55); transform: rotate(-18deg); box-shadow: 0 0 30px var(--accent-30); } .ds-cena__nave { left: 0; bottom: 18%; animation: ds-cena-nave 16s linear infinite; } .ds-cena__texto { left: 40px; right: 40px; bottom: 36px; } .ds-cena__texto .ds-overline { color: rgba(242,242,239,.6); } .ds-cena__frase { margin-top: 8px; font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; } /* o cartão da Entrada nas cenas: vidro nas escuras; na Janela, sem moldura, na metade da direita */ .ds-entrada--cena { background: transparent; position: relative; z-index: 1; } .ds-entrada--vidro .ds-entrada__card { background: rgba(28,27,34,.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .ds-entrada--orbita .ds-entrada__card { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .ds-entrada--janela { margin-left: 53.5%; } .ds-entrada--janela .ds-entrada__card { background: transparent; border-color: transparent; box-shadow: none; } .ds-entrada__logo--img { background: var(--surface) center/cover no-repeat; color: transparent; } @media (prefers-reduced-motion: reduce) { .ds-cena * { animation: none !important; } } /* ---------- Cenas Imagem e Marca (1.198): fundo personalizado da Entrada do portal ---------- */ .ds-cena--imagem { background: #0E0D14; } .ds-cena--imagem.ds-cena--janela { background: var(--page); } .ds-cena__foto { inset: 0; background-size: cover; background-repeat: no-repeat; } .ds-cena__painel > .ds-cena__foto, .ds-cena__painel > .ds-cena__veu, .ds-cena__painel > .ds-cena__vazia { position: absolute; inset: 0; } .ds-cena__veu { inset: 0; background: #000; } .ds-cena__vazia { inset: 0; display: grid; place-items: center; color: rgba(242,242,239,.55); font-size: var(--text-sm); border: 1px dashed rgba(255,255,255,.18); border-radius: inherit; } .ds-cena__painel .ds-cena__texto { z-index: 1; } /* Marca: o logo grande no centro, anéis na cor que se espalham e degradê da cor para o fundo */ .ds-cena--marca { background: radial-gradient(70% 60% at 50% 50%, var(--accent-22), transparent 70%), var(--page); } .ds-cena__marca-wrap { left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .14; animation: ds-cena-respira 6s ease-in-out infinite; } .ds-cena__marca { width: 520px; height: 520px; border-radius: 120px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-size: 200px; font-weight: 700; letter-spacing: -.04em; } .ds-cena__onda { left: 50%; top: 50%; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; animation: ds-cena-onda 8.1s ease-out infinite; } @keyframes ds-cena-respira { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.04); } } @keyframes ds-cena-onda { 0% { transform: scale(.6); opacity: .45; } 100% { transform: scale(2.2); opacity: 0; } } .ds-entrada--marca .ds-entrada__card { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }